javascript - 在 React 中显示/隐藏子组件

Question

我在 React 渲染函数中有以下代码:

<div>
    <InnerBox>
        <div>Box 1</div>
        <HiddenBox />
    </InnerBox>

    <InnerBox>
        <div>Box 2</div>
        <HiddenBox />
    </InnerBox>

    <InnerBox>
        <div>Box 3</div>
        <HiddenBox />
    </InnerBox>
</div>

我想要 <HiddenBox /> 中的每一个元素被隐藏直到 <InnerBox>单击元素。 <InnerBox> 的任何其他子元素应始终显示。

我的 InnerBox 目前有以下功能类:

handleClick(){
    this.setState({
        button_state: "clicked"
    })
}

还有我的 InnerBox 的渲染函数类看起来像这样:

return (
    <div onClick={this.handleClick.bind(this)}>{this.props.children}</div>
)

但是，我有点困惑代码到底要在哪里切换 HiddenBox 的显示。特定的元素InnerBox被点击了。

我该如何去做呢？

Answer 1

切换隐藏和显示。

export default class InnerBox extends React.Component {
  state = {
    buttonClicked: false
  };
  handleClick = () => {
    this.setState({
      buttonClicked: !this.state.buttonClicked
    });
  };
  render() {
    return (
      <div onClick={this.handleClick}>
        {this.props.children}
        {this.state.buttonClicked && <HiddenBox />}
      </div>
    );
  }
}