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

我希望能够在渲染组件之前，在其渲染功能之外更改组件的

样式

和

类名

。我在这里介绍了更多内容，但这是基本思想，能够以某种方式将样式和类名设置为属性：

仅当“style”变量在渲染函数中移动，并像普通（例如

）一样添加到div中时，以下操作才有效。我如何做以下工作

编辑：

/**@jsx React.DOM*/
var Main=React.createClass({
render:function（）{
var result=this.doRender（）；
变量样式={
边框：'1px纯红'
};
结果.风格=风格；
返回结果；
},
多伦德：函数（）{
返回(
试验
);
}
});
React.renderComponent（，document.body）；

React元素设计为不可变；通常情况下，你的应用程序将最容易理解，如果你重新构建它，在前面构建适当的道具，而不是在以后修改道具，React假设情况就是这样。也就是说，您可以使用来获得想要的效果：

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

（请注意，如果您的

doRender（）

函数返回了一个自定义组件，然后更改道具将更改该组件的道具，而不是生成的基础DOM组件。除了在

componentDidMount

中手动修改DOM之外，无法将其渲染为DOM组件并更改该组件的道具。

您可以尝试此游戏

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

---

谢谢你的指点！这是一个使用了上述方法并行之有效的方法……您是否可以进一步解释一下，为什么您认为这种方法是

改变了道具
？在组件的生命周期中，我不会在任何时候更改我的属性-我只是想避免每次编写可以自定义css样式和类的组件时都必须编写
。我希望有专门用于此目的的函数，例如
getClasses
和
getStyles
，它们会自动应用到我的组件，而不必使实际的标记更难看，并且一直重复
className={classes}style={styles}>
。谢谢！谢谢你的反馈！我的真正意图是有一个mixin可以管理我的渲染过程。。。我希望我的所有组件都能够实现一系列自定义属性，以简化管理样式和面向类的内容（例如高度、对齐、框架等），并且mixin方法似乎可以很好地用于我正在做的事情，正如上面实现的那样，但需要我将
样式={style}
，
类名={classes}
，并在每个组件渲染方法的顶部调用方法
getClasseSandStylesForRapperProperties
。每个组件中都有大量重复的代码。React值显式优于魔术。使用改变渲染工作方式的混音会使代码更难推理。这就是说，在React的未来版本中，您想要的可能会更实用，但我不能确定。@BenAlpert更新此答案，建议使用
React.cloneElement
而不是
React.cloneWithProps
，这有意义吗？从原始组件中丢失
键
和
ref
不太可能是理想的行为。
componentDidMount() {
  document.querySelector('.yourClassName').style = 'your: style'
}