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

小编典典

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

reactjs

我希望能够在呈现功能之前在呈现之前更改组件的style和className。我要做的事情比这里显示的要多，但这是基本思想，能够以某种方式将style和className设置为属性：

仅当“样式”变量在render函数内部移动并像普通方法一样添加到div时，以下才起作用<div style={style}>。如何进行以下工作？

/** @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);

阅读 851

2020-07-22

共1个答案

小编典典

React元素被设计为不可变的。通常，如果您重新构建应用程序以构建合适的props，而不是稍后对其进行变异，那么您的应用程序将最容易理解，React认为是这种情况。也就是说，您可以使用React.cloneElement获得所需的效果：

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

（请注意，如果您的doRender()函数返回了自定义组件，则更改道具将更改该组件的道具，而不是所生成的底层DOM组件。没有办法将其渲染为DOM组件并更改该组件的道具，除非手动进行更改中的DOM
componentDidMount。）

2020-07-22