Question

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

以下情况仅适用于“style”变量在render函数内移动，并像普通（例如<div style={style}>）一样添加到div中。我该如何进行以下工作？

/** @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组件并更改该组件的道具，而不是手动改变componentDidMount中的DOM。）

Answer 2

你可以尝试这个游戏

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

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

2 个答案: