ReactJs: как добавить / добавить компонент по нажатию кнопки

Скажем, <componentX \>, когда onClick кнопки «создать ящик», компонент X должен добавиться внутри контейнера-контейнера. Если я щелкну поле создания 3 раза, тогда три компонента X должны добавиться внутри контейнера-контейнера (это не просто сохранение компонента, а затем скрытие и отображение при щелчке по полю создания). Какие есть способы добиться этого в ReactJS.

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
	constructor(){
		super();
		
		this.state = {

		}
	}

	render(){
		let board = Box;

		return(
			<div>  	
				<a onClick = {}>Create Box</a>
				<div className = "box-container"></div>
			</div>
		);
	}
}

export default App;

javascript reactjs react-component

08.09.2018 19:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

9 740

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете условно выполнить рендеринг, используя состояние компонента следующим образом:

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
    constructor(){
        super();

        this.state = {
          showComp = false;
        }
    }

    handleClick = () => {
        this.setState({
           showComp: true,
       })
    }

    render(){
        let board = Box;
        const { showComp } = this.state;

        return(
            <div>   
                <a onClick = {this.handleClick}>Create Box</a>
                <div className = "box-container">
                  {showComp && <ComponentX />
                </div>
            </div>
        );
    }
}

export default App;

08.09.2018 19:13

Ответ принят как подходящий

Попробуйте что-то вроде этого:

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
    constructor(){
        super();

        this.state = {
            children: [];
        }
    }

    appendChild(){
        this.setState({
            children: [
                ...children,
                <componentX \>
            ]
        });
    }

    render(){
        let board = Box;

        return(
            <div>   
                <a onClick = {() => this.appendChild()}>Create Box</a>
                <div className = "box-container">
                    {this.state.children.map(child => child)}
                </div>
            </div>
        );
    }
}

export default App;

08.09.2018 19:14

Другие вопросы по теме

Ответьте два раза в экспрессе

Перезапуск setInterval после clearInterval в React

Выберите Параметры: заменить текст новым значением

Прояснение концептуального понимания компонентов React, компонентов более высокого порядка

Присоединитесь к массиву строк JS и элементу JSX

Реакция: в состоянии, как мне обновить вложенный объект по определенному индексу?

Привет. попробуйте запустить yarn install. Я не знаю что это за ошибка

ESLint Дополнительные круглые скобки в JSX

React Router v4. Необходимо предотвратить повторный рендеринг компонента (попытка создания сетки изображений, подобной Instagram)

Невозможно вызвать setState (или forceUpdate) на отключенном компоненте. Реагировать

ReactJs: как добавить / добавить компонент по нажатию кнопки

Ответы 2

Другие вопросы по теме

Похожие вопросы