React+antd 点击父组件中的标签打开子组件并展示子组件中读取到数据源

Question

场景:我在点击父组件中的标签打开子组件窗体,展示子组件中获取到信息。
缺陷:当我再新建一个方案,生成出来的会跟之前方案一模一样,相当于不是唯一的,继承到了之前的数据。
实现效果:我想要实现不管我新建多少个方案,我在点击父组件中的标签打开子组件窗体,展示子组件中获取到信息都是唯一的不会继承其他方案的数据、
部分代码如下

父组件
function ListTreeComponets ()  {
 const locationeSave = (formData, isTree) => {
      debugger
      if (isTree) {
        // 创建一级节点
        const parentNode = {
          title: (
                  <span>
                    {`${formData.SolutionName}`}
                    <SolutionOutlined  onClick={() => showModalBaisc(formData)}  style={{ marginLeft: '5px', marginRight: '5px' }}/> 
                    <PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '5px', marginRight: '5px' }} /> 
                  </span>
                ),
          value: randomId,
          children: []
        };
    
        // 创建二级节点
        const objectNode = {
          title: (
            <span>
              {formData.Objectnumber}
              <SolutionOutlined onClick={() => showModalProDrawer(formData)} style={{ marginLeft: '15px', marginRight: '5px' }} />
              <PlusCircleOutlined onClick={showModalInter} style={{ marginLeft: '5px', marginRight: '5px' }} />
            </span>
          ),
          value: `SL-${Math.floor(Math.random() * 1000000)}`, // 为新节点生成唯一的ID
          children: []
        };
    
        // 创建三级节点
        const interfaceNode = {
          title: (
            <span>
              {formData.InterfaceName}
              <SlackSquareOutlined onClick={() => showModalFormattribute(formData)} style={{ marginLeft: '15px', marginRight: '5px' }} />
              <FacebookOutlined onClick={() => showModallocaDoument(formData)} style={{ marginLeft: '15px', marginRight: '5px' }} />
            </span>
          ),
          value: `SL-${Math.floor(Math.random() * 1000000)}`, // 为新节点生成唯一的ID
          children: []
        };

        if(isTree){
        const newNode = {
          title: (
            <span>
              {`${formData.SolutionNo}-${formData.SolutionName}`}
              <DeleteOutlined onClick={(event) => handleDelete(`${formData.SolutionNo}-${formData.SolutionName}`, event)} />
            </span>
          ),
          value: randomId,
        }; 
      }
      }
    };
    
        const showModallocaDoument=(data)=>{ 
      debugger
      const internewData = {
        ...data,
        OptionControl: data.OptionControl,
        Optionlable:data.Optionlable,
      };
      const finalData = {
        ...internewData,
      };
      setisopendocmentdw(true);
      setformattritute(finalData);
      } 
      
      <IndocmentComponets
isopen={isopendocmentdw}  
onClose={handleCloseModaldo}
formattribute={formattribute} 
basicMeta={basicMeta}
docmetadata={docmetadata} // 将局部状态变量传递给子组件
basicData={basicData} 
/>
    
}export default ListTreeComponets;
子组件
 子组件
      function IndocmentComponets(){
      //展示数据 此处的数据是通过后端接口进行读取的
      }export default IndocmentComponets

父组件项目img

子组件img

思路:在react中好像可以使用状态来进行控制,点击的时候刷新组件重新加载数据,但是假如我两个方案:
方案1和方案2 当我修改任意一个方案里面的数据.当我使用状态更新会把我的数据都清空掉这并不是我想要的。
我个人觉得应该使用一个key唯一值来进行控制数据的展示。

Answer 1

要实现想要的效果，可以将数据源存储在父组件的状态中，而不是在子组件中。每当打开一个新的方案时，都创建一个新的子组件，并从父组件的状态中读取新的、与之前方案不相关的数据源。 你看这个方案怎么样 用props属性从父组件传递过来