单击时反应条件渲染

Question

我有文章 HTML 标签中的诗歌标题和图像列表。每当用户点击一篇文章时，我想要一个模式来显示诗句。到目前为止，每当点击一篇文章时，每首诗的模态都会打开。如何一次打开一个模态？这是我第一次使用 React。

链接到我的代码和框：

https://codesandbox.io/s/and-air-52dpo?fontsize=14

Answer 1

您需要将每张 Poem 卡片分离为一个组件，并将状态放入其中。通过像您一样在父组件上使用状态，它会导致所有诗卡都依赖于相同的状态。我已经分叉了你的代码和盒子，并修复了它们。你可以检查一下。https://codesandbox.io/embed/and-air-543tl

Answer 2

您show在Poems组件中使用单个变量。这不允许显示单个模态，因为所有模态都引用到同一个变量。我会在Poems's 状态中使用一个整数- 而不是布尔值show- 来存储当前呈现的模式。这个整数的最佳选择可能是诗的索引，因为你应该添加到你的map函数中：const listItems = data.map((poem, index) => (&nbsp; &nbsp; <React.Fragment key={index}>&nbsp; &nbsp; &nbsp; &nbsp; // The rest of your code is the same&nbsp; &nbsp; &nbsp; &nbsp; <Modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show={this.state.currentModal === index} // only this property was updated&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClose={this.showModal}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={poem.title}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // modal code&nbsp; &nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; </React.Fragment>))