Question

我正在构建一个简单的React应用程序，它在客户端实现CRUD操作，并通过Ajax与后端进行通信。我有一个容器组件，其中包含一个包含许多项的列表组件。

所以我有一个带有表单的组件来创建一个新项目。我也可以编写一个类似的表单来编辑列表中的项目。但我想实际制作一个模态弹出窗口而不是只在同一视图上有一个窗体。通常，例如with Materialize，您有以下内容：

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>



$(document).ready(function(){
    // the "href" attribute of .modal-trigger must 
    // specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

所以我在每个列表项中都有一个编辑按钮，它实际上是上面代码的第一部分。现在我的问题是：代码的第二部分 - 模态本身 - 应该放在我的React组件的结构中？如果我将它放在ListItem组件中，那么每个项目都将有一个模态。我的想法是将模态结构放在容器组件中，紧跟在List组件本身之后。但它似乎没有奏效。那么如果你使用React，你究竟会在哪里放置你的模态结构？注意：我没有使用Flux和Redux，我只是想使用状态和道具构建一个简单的应用程序。

// ContainerComponent:
<List>
<NewItemForm>
// I put the modal code inside the EditForm component, 
// but it doesn't seem to be trigger from the ListItem edit button :/
<EditForm>

// My ContainerComponent has the following code in componentDidMount:
$('.modal-trigger').leanModal();

在简单的React应用程序中放置模态的位置？

0 个答案: