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

我在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元素的确切位置，我有些困惑。

我该怎么做呢？

最佳答案

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

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

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

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

然后可以像下面这样更新render()的<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()以实现隐藏/显示切换行为：

handleClick(){
    this.setState({
        button_state: this.state.button_state === 'clicked' : '' : 'clicked'
    })
}

关于javascript - 在React中显示/隐藏子组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52999329/