ReactJS - Как изменить стиль и класс реагирующего компонента?

Я хотел бы иметь возможность изменять style и className компонента перед его визуализацией вне его функции рендеринга. У меня больше, чем здесь, но это основная идея, способная как-то установить стиль и className:

Следующее работает только в том случае, если переменная "стиль" перемещается внутри функции рендеринга и добавляется в div как обычно (например, <div style={style}>). Как я могу выполнить следующую работу?

JS Fiddle, который не работает

РЕДАКТИРОВАТЬ: Рабочий скрипт JS здесь!

/** @jsx React.DOM */

var Main = React.createClass({

    render: function() {
       var result = this.doRender();

       var style = {
         border:'1px solid red'
       };

       result.style = style;

       return result;
    },

    doRender: function() {
        return (
          <div>Test</div>
        );
    }
});

React.renderComponent(<Main/>, document.body);

Ответ 1

Элементы реагирования предназначены для неизменяемости; обычно ваше приложение будет проще всего понять, если вы реструктурируете его, чтобы создать правильный реквизит, а не мутировать их позже, и React предполагает, что это так. Тем не менее, вы можете использовать React.cloneElement, чтобы получить необходимый эффект:

render: function() {
    return React.cloneElement(this.doRender(), {
        style: {border: '1px solid red'}
    });
},

(Обратите внимание, что если ваша функция doRender() вернула пользовательский компонент, то изменение реквизита изменит реквизиты компонента, а не базовый компонент DOM, который будет создан. Невозможно преобразовать его в компонент DOM и изменить этот компонент реквизита, за исключением ручной мутации DOM в componentDidMount.)

Ответ 2

вы можете попробовать эту игру

componentDidMount() {
  document.querySelector('.yourClassName').style = 'your: style'
}