通过单行将状态作为prop传递

Question

下面的代码不起作用，它有错误，只是好奇如何显示另一个组件，如模态？

showModal(){
    this.setState({preview:true})
    <Modal show={this.state.preview} />
}

我认为将preview设置为true然后将其传递给show prop是多余的。由于我在Modal组件中声明了defaultProps，因此show默认为false，我怀疑是否仍然需要在将调用preview的组件的initialState中将状态Modal设置为false。

Answer 1

您必须返回要呈现的Babel / HTML组件。这可以通过以下方式实现：

return (
   <Modal show={this.state.preview} />
);

一般来说，构建代码的方式是，当你想渲染某些东西时（即在事件，按钮点击等之后），然后在发生这种情况时设置状态，然后在渲染{ {1}}组件，在那里检查if状态。 e.g：

<Modal .. />

您尝试不将控制可见性的状态传递给类似的组件。您可以控制父组件中组件的可见性。