React中动态添加子组件并实现Props同步更新的问题

问题出在你直接将<Child>元素存储到了useState的数组中。这些元素在被添加时会捕获当时var1的快照值，后续var1更新时，数组里的旧元素不会重新生成，因此子组件始终显示初始值。

要实现所有子组件props同步更新，核心思路是不要存储React元素实例，而是存储用于渲染子组件的元数据，在渲染阶段动态生成子组件，这样每次父组件重新渲染时，所有子组件都会使用最新的var1值。

方案一：仅控制子组件数量 #

如果只是需要添加多个子组件且它们共享同一个var1，可以用计数器来控制子组件数量：

import React, { useState } from 'react';
import Child from './TestComponentChild';

export default function Parent() {
    const [var1, setVar1] = useState(0);
    const [childCount, setChildCount] = useState(0);

    return (
        <div>
            {/* 动态生成对应数量的子组件，每次使用最新的var1 */}
            {Array.from({ length: childCount }, (_, index) => (
                <Child key={index} var2={var1} />
            ))}
            <button onClick={() => setChildCount(prev => prev + 1)}>TestButton1</button>
            <button onClick={() => setVar1(prev => prev + 1)}>TestButton2</button>
        </div>
    );
}

方案二：存储子组件额外元数据 #

如果每个子组件需要携带独立的额外属性，同时共享var1，可以存储对象数组：

import React, { useState } from 'react';
import Child from './TestComponentChild';

export default function Parent() {
    const [var1, setVar1] = useState(0);
    const [childrenData, setChildrenData] = useState([]);

    return (
        <div>
            {childrenData.map((data, index) => (
                <Child 
                    key={index} 
                    var2={var1} 
                    extraProp={data.extra} {/* 子组件的独立属性 */}
                />
            ))}
            <button onClick={() => setChildrenData(prev => [...prev, { extra: `子组件${prev.length + 1}` }])}>TestButton1</button>
            <button onClick={() => setVar1(prev => prev + 1)}>TestButton2</button>
        </div>
    );
}

原理说明 #

每次父组件因var1或子组件元数据更新而重新渲染时，都会重新执行map或Array.from生成新的<Child>元素，这些元素会自动绑定当前最新的var1值，从而实现所有子组件props的同步更新。

内容的提问来源于stack exchange，提问作者Antonio Valentinuzzi