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的{{1}}元素的显示切换到什么位置，我有点困惑。

我该怎么做？

Answer 1

如果我的理解正确，那么您可以通过以下方式更新<InnerBox/>的呈现方式来解决此问题：

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

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

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

然后您可以像这样更新render()的{{1}}函数：

<InnerBox/>

最后，您将以这种方式更新render() { const { button_state } = this.state; const isButtonStateClicked = button_state === 'clicked'; return (<div onClick={this.handleClick.bind(this)}> { this.props.children } { isButtonStateClicked && <HiddenBox /> } </div>) }，以实现隐藏/显示切换行为：

handdleClick()

Answer 2

切换隐藏和显示。

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

在React

2 个答案: