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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

JS小提琴不起作用

编辑：在这里工作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);

回答：

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

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

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

componentDidMount。）

以上是 ReactJS-如何更改React组件的样式和类？ 的全部内容， 来源链接： utcz.com/qa/425848.html

回到顶部