Question

我是新来的反应者，所以不确定亲子的工作方式，但是我试图单击按钮添加手风琴div。该按钮位于父组件中，然后手风琴位于子组件中（使代码易于阅读和简洁）。问题是，一旦添加了手风琴，屏幕上所有现有手风琴的id就会与最新添加的手风琴相同，并且由于每个手风琴都在目标id上工作，并且目标正在为现有手风琴进行更新，因此手风琴的目的不起作用。添加新的手风琴之后。

到目前为止，我已经尝试了2件事：

在子组件本身上生成唯一ID（现在我知道这将不起作用）
从父组件向子组件发送唯一的ID。这样，唯一的ID已成功生成并发送到子组件，但是问题仍然存在。

父组件：

{(envelop) ?
   <AddCard
     senderName={this.state.senderName}
     senderAdd={this.state.senderAdd}
     recName={this.state.recName}
     recAdd={this.state.recAdd}
     ranId={randomId1}
    > 
    </AddCard> :
    <AddTable
     senderName={this.state.senderName}
     senderAdd={this.state.senderAdd}
     recName={this.state.recName}
     recAdd={this.state.recAdd}
     > 
     </AddTable>
}

子组件（AddCard）：

    return (
        <div id="accordion">
           <div id="accHeader">
              <button
                 data-toggle="collapse"
                 data-target={"#collapseone_" + ranId}
                 aria-expanded="true"
                 aria-controls="collapseOne"
               >
                  {obj.senderName}
               </button>
             </div>
             <div id={"collapseone_" + ranId}>
               {obj.senderAdd}
               {obj.recName}
               {obj.recAdd}
             </div>
           </div>
        )

预期结果- 卡A被添加为data-target为collapseone_1，div id为collapseone_1。现在，当添加卡B时，它应该以{{1}}为data-target，以collapseone_2为div id，但是卡A的ID不变（从父组件传递时，ranId是唯一的）

当前结果：

添加了卡片A，其中collapseone_2为data-target，而collapseone_1为div id。现在，当添加卡B时，将其添加为collapseone_1和data-target，将其div ID为collapseone_2，但是添加后，卡A的ID便立即更改为collapseone_2 （数据目标和div ID都如此），因此手风琴无法正常工作，即在卡B上单击，卡A被切换。

编辑- 有一个搜索面板，在该面板上，用户可以在选择搜索值后调用父组件来搜索发件人姓名。因此就像搜索和添加手风琴一样。

如何为在React中动态添加子组件生成唯一的ID？

0 个答案: