Question

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

我有一个<div>，默认情况下是隐藏的，它会被渲染，让我们说Block1和Block2中的点击事件。当我单击Block2中的链接时，它应告知或设置块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事件等等 - 即能够优雅地调度你的状态。

如果答案是肯定的，那么您应lift the state从Block2到父组件，并通过道具将其传递给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中执行此操作的一个好方法是使用render props。但是，对于这个简单的情况，你可以这样做：

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>
    )
  }
}

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

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

3 个答案: