ReactJS - 如何更改反应组件的样式和类？

Question

我希望能够在渲染之前更改组件style和className渲染功能.我有更多的事情要比我在这里展示的更多,但这是基本的想法,能够以某种方式将样式和className设置为属性:

以下情况仅在"style"变量在render函数内移动时才有效,并且像普通(例如<div style={style}>)一样添加到div中.我该如何进行以下工作？

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);

Answer 1

React元素被设计为不可变的; 通常你的应用程序将最容易理解,如果你重新构建它以建立适当的道具而不是以后改变它们,并且React假设是这种情况.也就是说,您可以使用React.cloneElement来获得所需的效果:

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

(请注意,如果您的doRender()函数返回了一个自定义组件,那么更改道具将改变该组件的道具,而不是生成的底层DOM组件.没有办法将其渲染为DOM组件并更改该组件的道具,而不是手动变异DOM中的componentDidMount.)