javascript - ReactJS - 如何更改 React 组件的样式和类？

Question

我希望能够更改 style和 className渲染之前的组件，在它的渲染函数之外。我已经做了比我在这里展示的更多的事情，但这是基本的想法，能够以某种方式将样式和类名设置为属性:

仅当“style”变量在渲染函数中移动并像正常一样添加到 div 时，以下内容才有效(例如 <div style={style}> )。我怎样才能完成以下工作？

JS Fiddle that doesnt work

编辑:Working JS Fiddle here !

/** @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 元素被设计成不可变的；通常，如果你重组它以预先构建适当的 Prop 而不是稍后改变它们，你的应用程序将最容易理解，并且 React 假设情况就是这样。也就是说，您可以使用 React.cloneElement得到你想要的效果:

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

(请注意，如果您的 doRender() 函数返回一个自定义组件，那么更改 props 将更改该组件的 props，而不是生成的底层 DOM 组件。没有办法将其呈现为一个 DOM 组件并更改该组件的属性，而不是在 componentDidMount 中手动更改 DOM。)