Как по клику создать теги в react?

Question

[SerjAndreev]

В ректе новенький.
Может кто то описать механику создания не большого конструктора на реакте ?
Предположим у нас есть асайд с кнопками с найменованиями например h1, div, span, и мейн в который наши теги будут вкладываться.
Не совсем понимаю всю механику построения.И по этому не могу понять что мне нужно.Что бы разобраться самому.
Как это можно реализовать?
Спасибо.

Comments

[Петр Мухуров]

по кликам создавай объекты типа

{
  C: "div",
  props: { ... }
}

складывай их в массив, клади в стейт и забрасывай в main, а там рендери

{
  map(components, ({ C, props }) => <C {...props />)
}

или клади в массив сразу, без ненужной прослойки

state = {
  components: []
}
this.setState(prevState => {
  ...prevState,
  components: [...prevState.components, <div key={`div_${prevState.components.length + 1}`}>div</div>]
})

и как children отдавай в пропсы для main

<main>
  {this.state.components}
</main>

[SerjAndreev]

Петр Мухуров, по клику делать экшн который будет перерисовывать масив в сторе и докидывать обьект в масив правильно я понял ?

[Петр Мухуров]

SerjAndreev, если вы работаете с редакс, то да, хотя я не уверен, что в сторе правильно хранить коллекцию реактовских компонентов

[SerjAndreev]

Петр Мухуров, я вас понял.Вы считаете что лучше это делать в локальном стейте ?

[Петр Мухуров]

SerjAndreev, нет, я считаю, нужно разобраться, правильно ли держать в сторе коллекцию компонентов) Если правильно - все ок, если нет - тогда в сторе держать коллекцию объектов, которая потом будет уже в рендере мапится в компоненты

[SerjAndreev]

Петр Мухуров, предположим что ,это реальный конструктор сайтов(просто предположим,не более, промотрел видео уроки практикую навыки , не знал что придумать, вот придумал создать не большой конструктор сайтов :) так же хотел бы добавить возможность его редактирования, высоты ширины , цвета бг и просто редактирования , вставки текста вообщем как то так))То как быть тогда стор или локальный ?

[Петр Мухуров]

SerjAndreev, если вы юзаете редакс - используйте стор

[SerjAndreev]

Петр Мухуров, не могли бы пожалуйста подсказать как правитьно положить обьект в редьюсер, не получается((
import { ADD_DIV} from '../actions/actionTypes'

const initialState = {
elem: []
}

export default function(state = initialState , action) {
switch(action.type){
case ADD_DIV:
return{
elem: state.elem.push({ id: state.elem.length + 1, tag: 'div'})
}
default:
return state
}
}

[Петр Мухуров]

SerjAndreev, push() возвращает последний добавленный элемент, а не массив

return {
  elem: [...state.elem, { id: state.elem.length + 1, tag: "div" }]
}

[SerjAndreev]

Петр Мухуров, работат)))Спасибо вам большое)))А как вас отметить решением ?

[Петр Мухуров]

SerjAndreev, никак, это не было ответом)

[Олег Котов]

SerjAndreev, если автор ответа упирается, напиши сам и отметь решением. Чтобы вопрос не висел нерешённым.