在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

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

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

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

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

然后可以像这样更新<InnerBox/>的render()函数：

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()这种方式更新handdleClick()以实现隐藏/显示切换行为：

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

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