小编Tiw*_*tiw的帖子

代码沙盒链接

我有两个组件，一个父组件和一个子组件。父组件将子组件的列表保存在状态中，并使用 map 方法渲染它。

家长：

import { useState } from "react";
import Child from "./Child";

export default function Parent(){
    const [counter, setCounter] = useState(0)
    const [childKey, setChildKey] = useState(0);
    const [children, setChildren] = useState([]);

    function addChild(){
        setChildren([...children, <Child counter={counter} index={childKey}/>]);
        setChildKey(childKey + 1);
    }

    return (
        <>
            <h2>The parent component</h2>
            <p>The counter is set to {counter}</p>
            <p><button onClick={() => {setCounter(counter + 1)}}>Increment</button></p>
            <p><button onClick={addChild}>Add child</button></p>

            {children.map((c, i) => {
                return (
                        <div key={i}>{c}</div>
                    );
            })}
            
        </>
    );
}

孩子：

export …