reactjs - React 按钮单击隐藏和显示组件

Question

我有一个显示和隐藏文本的切换按钮。单击按钮时，我希望它隐藏另一个组件，如果再次单击它会显示它。

我在这里创建了一个 repl：

https://repl.it/repls/DapperExtrasmallOpposites

我想保留原始的显示/隐藏文本，但我还想在单击按钮时隐藏一个附加组件。

如何传递该状态或如何创建 if 语句/三元运算符来测试它是否处于显示或隐藏状态。

在上面的 repl 中一切都说得通！

标签： reactjsstatereact-props

Answer 1

我刚刚看了你的REPL。

您需要在 App 组件中具有可见性状态，然后传递一个函数以将其更新到 Toggle 组件。

然后很容易有条件地渲染 NewComponent 组件，如下所示：

render() {
  return (
    <div className="App">
    {this.state.visibility && <NewComponent />}
    <Toggle setVisibility={this.setVisibility.bind(this)} />
    </div>
  );
}

其中setVisibility函数是更新可见性状态的函数。