ReactJS设置其他组件的组件状态

Question

是否可以在两个组件之间传递道具或状态？

我有一个<div> ，默认情况下是隐藏的，它被渲染，比如说Block1和Block2的click事件。 当我单击Block2中的链接时，它应该告诉或设置Block 1中的活动状态。我该怎么做？

class Block1 extends React.Component{
   constructor(){
     super()

     this.state = {
       showElem: false
      }

     render() {
       return() {
        <div>
           {this.state.showElem ? <div data-active={this.state.showElem}/> : null}
        </div>
     }
   }
  }
}


class Block2 extends React.Component{
    constructor(){
      super()

      this.state = {
        showElem: false
      }

      handleClick() {
         this.setState({showElem: !this.state.showElem})
      }

      render() {
         return() {
           <div>
             <a onClick={this.handleClick.bind(this)}>Click to show Block1</a>
          </div>
      }
    }
  }
}

CSS会像

div {
  display: none;
}

[data-active="true"] {
   display: block
}

那么，这可能吗？

Answer 1

查看Block 1和Block2是否处于紧密耦合关系。 指示将是始终包含两者的父组件，或者是在不存在Block1情况下知道如何处理click事件的父组件，等等–即能够优雅地分派状态。

如果答案是肯定的，那么您应该将状态从Block2 提升到父组件，然后通过props将其传递给Block1。

如果答案是否定的，并且组件可以彼此独立使用，则状态更改对于您的应用程序是全局的。 正如Adam Azad所建议的那样，您应该研究Redux中的全局状态管理，并让Block2生成一个动作，让Block1订阅该动作可能导致的任何状态更改。

Answer 2

如果这两个组件具有相同的父对象，则可以将状态和处理程序方法上移一级。 像这样：

class MightyParent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isBlock1Visible: false,
    }
    this.handleBlock2Click = this.handleBlock2Click.bind(this);
  }

  handleBlock2Click() {
    this.setState({isBlock1Visible: true});
  }

  render() {
    <Block1 isVisible={this.state.isBlock1Visible} />
    <Block2 onClick={this.handleBlock2Click} />
  }
}

然后，您分别访问每个块中传递的道具。

Answer 3

确实有可能！ 在React中执行此操作的一种不错的方法是使用渲染道具 。 但是，对于这种简单的情况，您可以执行以下操作：

const Block1 = (props) => <div>whatever stuff goes here</div>

class Block2 extends React.Component{
  constructor(){
    super()

    this.state = {
      showElem: false
    }
  }

  handleClick() {
    this.setState({ showElem: !this.state.showElem })
  }

  render() {
    const { showElem } = this.state
    return (
      <div>
        <a onClick={this.handleClick.bind(this)}>Click to show Block1</a>
        { showElem &&
            <Block1 />
        }
      </div>
    )
  }
}

本质上，您将根据Block2的状态呈现整个Block1元素。 如果将showElem更改为true，则将渲染Block1 ，否则，此部分： { showElem && <Block1 /> }不会渲染任何东西，从而隐藏Block1元素。