Question

我有一个下拉组件，如下所示：

 {...}
        this.state = {
            isVisible: false
        }
    }

    toggleDisplay() {
        this.setState({isVisible: !this.state.isVisible});
    }

    render() {
        return (
            <div>
                <button onClick={this.toggleDisplay()}>click</button>
                {this.state.isVisible ? <MenuElements toggleDisplay={this.toggleDisplay} /> : '' }
            </div>
        )
    }
}

“MenuElements”只是一个有li的ul。在另一个页面上，我多次使用此组件，因此每当我单击按钮时，每次单击都会显示“MenuElements”。问题是我只想显示一个组件。因此，如果已经显示了MenuElements组件，如果我单击另一个按钮，它将关闭上一个组件，并打开第二个组件。

如何在我的代码中实现？

感谢。

Answer 1

您将需要一个单一的状态来定义显示哪个MenuItem。您可以使用类似Redux的全局状态，但如果您正在尝试构建可重用的组件，我认为最好将所有MenuItem组件包装在父组件中并在那里保持状态。我认为，这是React的做法。阅读本文，了解如何设计组件：https://facebook.github.io/react/docs/thinking-in-react.html。

BTW，我认为Button onClick处理程序中存在错误。它应该是：

<button onClick={this.toggleDisplay.bind(this)}> // or bind it somewhere else

此外，根据以前的状态更改状态的正确方法是this：

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

Answer 2

我说这是你回调的背景。你有没有试过强迫上下文？

<div>
    <button onClick={this.toggleDisplay.bind(this)}>
        click
    </button>
{this.state.isVisible ? 
    <MenuElements toggleDisplay={this.toggleDisplay.bind(this)} /> 
: '' }
</div>

React：下拉组件显示一次

2 个答案: