Как визуализировать динамические компоненты на клике

Question

Мой код создает динамические компоненты / элементы в зависимости от размера списка объектов (в кеше / памяти). Как я могу изменить это так, чтобы onClick в строке 32 (fab-click) добавил да еще один объект в список. Я опустил класс MainMenuElement, поэтому предположим, что он работает. Я думаю, что это проблема незнания того, как "думать в ответ". Должен ли я использовать состояние реакции, чтобы достичь этого, или есть более чистый способ?

Я на самом деле адаптирую это из приложения 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"] по умолчанию. Я надеюсь, что вы поняли, хотя.