如何改变react组件的样式和类

ReactJS - How to change style and class of react component?

本文关键字：组件 样式 react 何改变 改变      更新时间：2023-09-26

我希望能够在渲染之前改变组件的style和className，在它的渲染函数之外。我要做的比这里展示的要多，但这是基本思想，能够以某种方式将style和className设置为属性:

只有当"style"变量被移动到渲染函数内部，并像正常一样添加到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元素被设计成不可变的;通常情况下，如果你预先构建适当的道具，而不是稍后对其进行修改，你的应用程序将最容易理解，React也会这样认为。也就是说，你可以使用React。cloneElement来获得你想要的效果:

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

(注意，如果您的doRender()函数返回一个自定义组件，那么更改props将更改该组件的props，而不是生成的底层DOM组件。)没有办法将其呈现为DOM组件并更改该组件的道具，除非在componentDidMount中手动更改DOM。

你可以试试这个游戏

componentDidMount() {
  document.querySelector('.yourClassName').style = 'your: style'
}
相关文章：