动态附加组件

Posted 2023-02-23

【中文标题】动态附加组件

【英文标题】：Append a component dynamically

【发布时间】：2021-03-03 09:00:33

【问题描述】：

我尝试动态添加一个组件，这里是我尝试添加到 MainComponent 的板。 当循环 for 运行时，函数 addChild 工作和列表 boards 被填满，但没有发生其他任何事情，屏幕上没有显示任何内容

const MainComponent = props => (
    <div className=props.className>
        <p>
            <a href="#" onClick=props.addChild>Add Another Child Component</a>
        </p>
        props.boards
    </div>
);

class MainPage extends React.Component 

    state = 
        numChildren: 0
    

    onAddChild = () => 
        this.setState(
            numChildren: this.state.numChildren + 1
        );
    

    render () 

        const boards = [];

        for (var i = 0; i < this.state.numChildren; i += 1) 
            var _id = "board-" + i;
            console.log
            boards.push(<Board id=_id className="board" />);
        ;

        return (
            <div className="test">
                <Title/>
                <MainComponent addChild=this.onAddChild className="flexbox">
                    boards
                </MainComponent>
            </div>
        );
    


export default MainPage```

【参考方案1】：

尝试为每个ChildComponent添加密钥

const boards = [];

for (var i = 0; i < this.state.numChildren; i += 1) 
    var _id = "board-" + i;
    console.log
    boards.push(<Board id=_id key=_id className="board" />);
;

因为 react 依赖于渲染循环内渲染组件的键

所以 react 认为你正在渲染的所有子元素都是一个组件，除非你给它们一个不同的键