Question

我有一个反应组件，其中包含两个子组件，在父组件中，我有一个按钮，用于启动一个函数来更改父级和子级中的样式。我设法改变了父母的风格，但没有改变孩子的风格这就是我所做的

var XBlockButtons = React.createClass({

getInitialState(){

return{
  Componentstyle:{display:"block"},
  HTMLstyle:{display:"none"},
}

},

showhtml(){
this.setState({
    Componentstyle:{display:"none"},
    HTMLstyle:{display:"block"}

})
},


render: function() {


var style={display:'block'}

return (


  <div className="add-xblock-component new-component-item adding">

    <div className="new-component" style={this.state.Componentstyle}>
      <ul className="new-component-type" >

        <li>

            <button type="button" className="multiple-templates add-xblock-component-button" data-type="html" onClick={this.showhtml}>
              <span className="large-template-icon large-html-icon"></span>
              <span className="sr"> Add Component:</span>
              <span className="name">HTML</span>
            </button>

        </li> /ul></div>
      <HTML/>

----- -----儿童

var HTML = React.createClass({
render:function(){

    return(
      <div className="new-component-templates new-component-html" style={this.state.HTMLstyle}></div>);})};

Answer 1

将样式作为prop组件传递给子组件，然后在那里使用

家长：

 <HTML HTMLstyle={this.state.HTMLstyle}/>

现在在孩子

var HTML = React.createClass({
componentWillMount: function(){
     this.setState({HTMLstyle: this.props.HTMLstyle})
},
componentWillReceiveProps: function(nextProps) {
      this.setState({HTMLstyle: nextProps.HTMLstyle})
},
render:function(){

    return(
      <div className="new-component-templates new-component-html" style={this.state.HTMLstyle}></div>
    );
  }
)};

Answer 2

那是因为你需要将样式值作为道具传递给子组件

<HTML {...HTMLstyle}/>

我的语法可能有问题，但我希望你明白这一点。

从父componnet中的事件改变反应子组件的样式

2 个答案: