单击时反应条件渲染

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) => (

    <React.Fragment key={index}>

        // The rest of your code is the same

        <Modal

          show={this.state.currentModal === index} // only this property was updated

          onClose={this.showModal}

          title={poem.title}

        >

            // modal code

        </Modal>

    </React.Fragment>

))