javascript - ReactJS 从另一个组件设置一个组件的状态

Question

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

我有一个 <div>默认情况下是隐藏的，它被呈现在，比方说 Block1和 Block2 中的点击事件.当我单击 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

查看 Block1 和 Block2 是否处于紧耦合关系中。这表明父组件要么总是包含两者，要么知道在 Block1 不存在的情况下如何处理点击事件，等等——即能够优雅地调度你的状态。

如果答案是肯定的，那么你应该 lift the state从 Block2 到父组件并通过 props 将其传递给 Block1。

如果答案是否定的，并且组件可以彼此独立使用，那么状态更改对您的应用程序是全局的。你应该像Adam Azad建议，查看 Redux 中的全局状态管理，让 Block2 生成一个 Action ，然后 Block1 订阅该 Action 可能导致的任何状态变化。