如何在onClick上呈现动态组件

Question

我的代码根据实体列表的大小（在缓存/内存中）创建动态组件/元素。我如何修改它，以便onClick on line 32（fab-click）将另一个实体添加到列表中。我省略了MainMenuElement类，所以让我们假设它有效。我认为这是一个不知道如何“思考反应”的问题。我必须使用react的状态来实现这一目标，还是有更清洁的方式？

我实际上是从一个使用的HTML5 / CSS3应用程序中调整它，并且发现这比仅仅使用模板在任何地方/任何时间附加孩子要困难得多。救命。

createMainMenuElement(conversation){
    return <MainMenuElement conversation = {conversation} key ={conversation.key} />
}

createMainMenuElements(conversations) {
return conversations.map(this.createMainMenuElement)
}

generateData = function(){
    let usernames = ["tony","john","doe","test", "bruce"]
    let data = [];
    for(let i = 0; i < 5; i++){
        let temp = {key: i.toString(), username: usernames[i], timestamp: "4:30", subtitle: "The quick brown fox jumps over the lazy dog"}
        data.push(temp)
        this.mainMenuStack+=1;
    }
    return data;
};

handleFabClick() {
    console.log("test")
    let temp = {key:this.mainMenuStack.toString(), username: "Baby", timestamp: "12:30", subtitle: "The quick red cat jumps over the yellow dog"};
    this.createMainMenuElement(temp);
};



render(){
    return(
        <div className={cx('mainMenu')}>

            <div className={cx('mainMenu__element','mainMenu__element--pseudo')} onClick={this.handleFabClick}>

                <div className={cx('mainMenu__element__icon fab')} id="fab">
                    <div className={cx('fab__icon')}>&#43;</div>
                </div>

                <div className={cx('mainMenu__element__textWrapper')}>
                    <div className={cx('mainMenu__element__title')}>New Conversation</div>
                </div>

            </div>
            {this.createMainMenuElements(this.generateData())} //WORKS ON LOAD
            //WANT TO RENDER/APPEND DYNAMIC COMPONENTS HERE
        </div>
    )
};


}

Answer 1

当您需要考虑数据时，您正在考虑DOM。在React中，DOM纯粹是数据的一个功能。

您需要存储动态创建的数据，让我们使用数组

constructor(props){
    super(props)
    this.state = {
        elements:[]
    }
}

然后渲染数据。 elements现在是空的，没关系。但我们知道最终，用户将动态创建数据。渲染功能已经处理了！

render(){
    return (
        <div>
            //other code
            {this.state.elements.map(this.createMainMenuElement)}
        </div>
    )
}

现在让我们添加数据。

handleFabClick() {
    let temp = {key:this.mainMenuStack.toString(), username: "Baby", timestamp: "12:30", subtitle: "The quick red cat jumps over the yellow dog"};
    this.setState({
        elements: [...this.state.elements, temp]
    })
};

我们现在已经改变了组件的状态，导致它重新渲染，这将显示新数据。无需DOM操作！

我的代码不会直接转换为您的问题，我只是向您展示React的基本原理。你说你想要将元素添加到现有列表中，所以看起来elements默认需要包含["tony","john","doe","test", "bruce"]。我希望你明白这一点。