Динамическое добавление компонентов по нажатию React + Redux

Question

Я пытаюсь изучить React, и сейчас я создаю простой планировщик событий, похожий на React-big-scheduler . Я использую Redux для хранения позиций каждой ячейки. В основном, я пытаюсь сделать это, когда я нажимаю на ячейку, в этой позиции должен отображаться React-rnd компонент , основанный на положении и размере ячейки (в значительной степени покрывающий всю ячейку), размер которого можно изменить или позже перетащили в другую позицию.

Насколько я понимаю, проблема заключается в рендеринге элементов в компоненте планировщика. Любая идея высоко ценится.

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

Answer 1

Вы не должны использовать document.getElementById с React.Если вы захотите использовать ссылку (узнайте больше здесь: https://reactjs.org/docs/refs-and-the-dom.html),, однако в этом случае вам не нужно ни того, ни другого. У вас должен быть метод «cellClick» в вашем компоненте планировщика и передача его вашему компоненту <Test/> сcellProps.

Пример: <Test onClick={(e) => cellClick(e, props)} key={cellProp.id}/>

Идентификаторы не нужны в реакции, так как элементы DOM не извлекаются таким образом. Значение ключа требуется только в том случае, если массив компонентовиспользуйте пропозицию onClick, чтобы передать ее активируемому компоненту.

Answer 2

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

const reducer = (state = hardCodedValues, action) => {}

Добавьте код для вашего редуктора, и вам будет легче увидеть проблему.

Изменить после просмотра кодов и коробки:

Как уже говорили другие, похоже, в вашем редукторе есть какая-то очень нечистая логика. Вы напрямую изменяете состояние, используя .push в своем массиве cellProps вместо возврата нового. Есть также много условных выражений в ваших случаях редуктора, что делает все состояние очень непредсказуемым. Насколько я понимаю, похоже, что ваши действия ADD_CELL_PROP плохо обновляют состояние, оно обновляется только в результате действий UPDATE_CELL_PROP.

Я бы порекомендовал удалить всю логику изменения размера и заставить работать чистую часть системы. Изменение размера и перетаскивание являются событиями, основанными на dom, которые сложно обрабатывать с помощью Redux, поэтому добавляйте их только после того, как вы убедитесь, что желаемое поведение работает правильно.