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

【问题标题】：ReactJS - How to change style and class of react component?ReactJS - 如何更改反应组件的样式和类？
【发布时间】：2014-09-11 10:10:32
【问题描述】：

我希望能够在渲染功能之外更改组件的style 和className。我要做的事情比我在这里展示的要多，但这是基本思想，能够以某种方式将样式和 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);

【问题讨论】：

标签： javascript facebook reactjs

【解决方案1】：

React 元素被设计成不可变的；通常，如果您重组应用程序以预先构建适当的道具而不是稍后对其进行变异，那么您的应用程序将最容易理解，并且 React 假设是这种情况。也就是说，您可以使用React.cloneElement 来获得您想要的效果：

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

（请注意，如果您的 doRender() 函数返回了一个自定义组件，那么更改 props 将更改该组件的 props，而不是生成的底层 DOM 组件。无法将其渲染为 DOM 组件并更改该组件的props，没有手动修改 componentDidMount 中的 DOM。）

【讨论】：

感谢指点！这是an updated fiddle，它使用上述方法并有效......
您能否再解释一下为什么您认为这种方法是mutating the props？在组件的生命周期中，我不会随时更改我的属性——我只是想避免每次编写可以具有自定义 css 样式和类的组件时都必须编写 <div className={classes} style={styles}>。我希望有专门为此目的的函数，例如getClasses 和getStyles，然后它们会自动应用于我的组件，而不必使实际的标记更丑陋，并且一直重复className={classes} style={styles}>。谢谢！
感谢您的反馈！我的真正意图是拥有一个可以管理我的渲染过程的mixin......我希望我的所有组件都能够实现一系列自定义属性，以简化管理样式和面向类的事物（例如高度，对齐, frame 等），并且混合方法似乎适用于我正在做的事情，如上所述，但需要我将style={styles}、className={classes} 和对方法getClassesAndStylesForWrapperProperties 的调用放在每个组件的顶部渲染方法。每个组件中有很多重复的代码。
React 重视明确性而非魔法。拥有改变渲染工作方式的 mixin 会使你的代码更难推理。也就是说，你想要的可能在未来版本的 React 中会更实用，但我不能肯定。
@BenAlpert 更新此答案以推荐使用React.cloneElement 而不是React.cloneWithProps 是否有意义？从原始组件中丢失key 和ref 不太可能是理想的行为。

【解决方案2】：

你可以试试这个游戏

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

【讨论】：