为什么我的模态只接受传递给它的第一个道具？ （使用反应和引导）

Question

你好:) 我正在使用 Bootstrap 制作一个 offcanvas 组件，该组件可以为传递给它的数组中的每个项目呈现模式。 但是，当单击打开我的模式时，它们每个都仅显示第一个项目道具。 为什么？ 而且，我该如何解决？ 我在代码和框代码框娱乐中重新创建了它如果我可以改进我的问题，请以一种友好的方式告诉我。

Answer 1

您所做的方式并不是在 React 中构建 Modal 的正确方式。 但是，只是为了让您清楚地了解您所犯的错误：

prop letter正确传递。 问题是你调用模态的方式。

如果您在Example.js中看到您的代码，则表明您使用了data-bs-target="#exampleModal" 。 并且id="exampleModal"用于显示模式。 所以所有的处理程序都指向exampleModal id。 因此，单击按钮后，仅显示第一个模式。

要解决这个问题，您需要动态分配data-bs-target和id 。 如下所示：

  <button
        type="button"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target={`#exampleModal${props.letter}`}
      >
        click to view prop
      </button>

然后在 Modal 中将id设置为：

<div
        class="modal fade"
        id={`exampleModal${props.letter}`}
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >

它应该按预期工作。

这是工作示例： 演示