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

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

我有一个默认情况下隐藏的

，可以在中渲染，比如说

Block1

和

Block2

中的单击事件。当我点击Block2中的链接时，它应告知或将Block1中的状态设置为active（活动）。我该怎么做

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

---

那么，这可能吗

查看

块

1和

块2

是否处于紧密耦合关系中。表示这一点的是一个父组件，它总是同时包含这两个组件，或者知道在

Block1

不存在的情况下如何处理单击事件，等等——即能够优雅地调度您的状态

如果答案是肯定的，那么您应该从

Block2

到父组件，并通过道具将其传递给Block1

---

如果答案是否，并且组件可以彼此独立使用，则状态更改对应用程序是全局的。正如建议的那样，您应该在Redux中查看全局状态管理，让

Block2

生成一个操作，并

Block1

订阅该操作可能导致的任何状态更改。

如果这两个组件有共同的父级，您可以将状态和处理程序方法提高一级。诸如此类：

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

类可能不会扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
IsBlock1可见：false，
}
this.handlelock2click=this.handlelock2click.bind（this）；
}
把手锁2舔（）{
this.setState（{isBlock1Visible:true}）；
}
render（）{
}
}

---

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

这确实是可能的！在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>
    )
  }
}

constblock1=（道具）=>这里有什么东西
类Block2扩展了React.Component{
构造函数（）{
超级（）
此.state={
肖维伦：错
}
}
handleClick（）{
this.setState（{showElem:！this.state.showElem}）
}
render（）{
const{showElem}=this.state
返回(
单击以显示Block1
{showElem&&
}
)
}
}

---

本质上，您是根据

Block2

的状态渲染整个

Block1

元素。如果将

showlem

更改为true，则将呈现

Block1

，否则，

{showlem&&}

将不呈现任何内容，隐藏

Block1

元素。

您可能需要查看flux或redux。嗨，Steve！你能提供JSFIDLE或codepan链接吗？下面已经有几个足够的答案了。但我想说的是：；在这两种情况下，代码都没有终止构造函数。请务必发布完整的代码，以便我们更容易理解问题。乍一看，我注意到您正在调用构造函数中的render，我想知道为什么。其次，如果您只想在构造函数中声明状态，那么可以保存一些代码并完全跳过构造函数<代码>类Block1扩展了React.Component{state={key:value}；}，因为state是类属性。我支持这个答案。如果要将这两个组件紧密耦合（例如，如果没有另一个组件，则无法渲染其中一个），则可以将它们与父组件一起渲染，或者将一个组件与另一个组件一起渲染，在这种情况下，可以提升状态。然而，即使在紧密耦合的关系中，Redux也是一种通过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>
    )
  }
}