Question

如何通过单击另一个按钮来更改组件的颜色。我试图通过设置状态来做到这一点，但这是不可能的。而在此组件中，SecondAnotherBox不是属性中的样式。

var AnotherBox = React.createClass({
    boxclick: function()
    {
        //change from here
    },
    render: function()
    {
        return(
        <div onClick={this.boxclick}> anotherbox</div>)
    }
});
var SecondAnotherBox = React.createClass({//change this
    render: function()
    {
        return(
        <div> secondanotherbox</div>)
    }
});
var ComplexBox = React.createClass({
    render: function()
    {
        return(
        <div>
        <AnotherBox />
        <SecondAnotherBox />
        </div>)
    }
});
ReactDOM.render(
  <ComplexBox />,
  document.getElementById('test')
);

Answer 1

你有三个组件

ComplexBox与AnotherBox和SecondAnotherbox。

将您的状态保留在ComplexBox中。
将您的boxClick函数移至ComplexBox
将属性onBoxClick添加到AnotherBox并将onClick连接到{this.props.onBoxClick}
将属性添加到SecondAnotherBox颜色并使用“ComplexBox.state.color”作为值
in boxClick函数更改“ComplexBox.state.color”

在代码中看起来像这样......

    var AnotherBox = React.createClass({

        render: function()
        {
            return(
            <div onClick={this.props.onBoxClick}> anotherbox</div>);
        }
    });

    var SecondAnotherBox = React.createClass({//change this
        render: function()
        {
            return(
            <div style={{ borderColor: this.props.color }}> secondanotherbox</div>);
        }
    });

    var ComplexBox = React.createClass({
        getInitialState: function() {
            return {
                color: 'blue'  
            };
          },
        boxclick: function()
        {
            //change from here
            var newColor = this.state.color == 'red'?'blue':'red'; 

            this.setState({
                color: newColor
            })
        },
        render: function()
        {
            return(
            <div>
                <AnotherBox onBoxClick={this.boxclick} />
                <SecondAnotherBox color={this.state.color} />
            </div>);
        }
    });

    ReactDOM.render(
      <ComplexBox />,
      document.getElementById('test')
    );

Answer 2

如果您愿意，可以使用+ CSS选择器执行此操作。查看pen here

我认为这非常脆弱。对DOM布局的轻微更改将破坏这一点。使用像redux这样的全局状态管理器并将这些信息作为道具传递给组件会好得多。

编辑：您仍然可以仅使用反应状态来实现此目的。另一个pen for demo。

Answer 3

为什么不尝试在容器ComplexBox上放置一个状态，如下所示：

 var AnotherBox = React.createClass({
    boxclick: function()
    {
      //change from here
    },
    render: function()
    {
      return(
        <div
          onClick={this.boxclick}
          style={ this.props.boxClicked === 1 ? color: blue }
        >
          anotherbox
        </div>
      )
    }
  });
var SecondAnotherBox = React.createClass({//change this
  render: function()
  {
    return(
      <div style={ this.props.boxClicked === 2 ? color: blue }> secondanotherbox</div>)
  }
});
var ComplexBox = React.createClass({

  constructor: function() {
    this.state: { boxClicked: 1 }
  }
  render: function()
  {
    return(
      <div>
        <AnotherBox
          boxClicked: this.state.boxClicked
        />
        <SecondAnotherBox
          boxClicked: this.state.boxClicked
        />
      </div>)
  }
});
ReactDOM.render(
  <ComplexBox />,
  document.getElementById('test')
);

在React Component中更改borderColor

3 个答案: