Есть ли способ вызвать функцию дочернего компонента от другого потомка?

Question

Я участвую в разработке приложения React / Redux с открытым исходным кодом, созданного с использованием ES6 JavaScript.Я довольно новичок в React / Redux, поэтому у меня возникли некоторые проблемы.

У меня есть родительский класс, который отображает два разных компонента React.Первый компонент содержит несколько полей ввода относительно событий (называемых NewShift).Второй компонент - это календарь, который отображает эти события (он называется «Индекс»).

Как только пользователь заполняет поля ввода и нажимает кнопку в первом компоненте, я хочу иметь возможность повторно отобразить календарь ввторой компонент.Если функция повторного рендеринга есть в компоненте календаря, как я могу вызвать ее из компонента полей ввода (оба потомка).

Answer 1

Если вы не используете Redux, вы можете выбрать другой путь.Вместо того, чтобы функция, принимающая ввод, находилась в NewShift, новый смещение получает функцию в качестве подпорки от родителя.

Так что в вашем компоненте NewShift у вас будет что-то вроде onClick={this.props.submitCalanderInfo()}

Функция submitCalanderInfo будет частью родительского компонента.Возможно, вы захотите сохранить эту новую информацию в состоянии родительского компонента, а затем использовать это состояние для обновления реквизитов в календаре или компоненте индекса.Таким образом, индекс может выглядеть примерно так:

<Index shiftData={this.state.shiftData} />

Answer 2

React повторно визуализирует компоненты при каждом изменении состояния компонента. Если вы используете только React, это будет означать передачу измененных значений до состояния родительского компонента для принудительного повторного рендеринга. Тем не менее, Redux облегчает вам эту задачу, поскольку его «Store» функционирует как глобальное состояние. Вы можете принудительно выполнить повторную визуализацию, изменив соответствующие переменные в магазине.

Учитывая вашу ситуацию: кнопка должна получить это в своем атрибуте onClick: onClick={() => dispatchNewCalendarInfo(payload)}.

dispatchNewCalenderInfo также должен быть импортирован компонентом: import { dispatchNewCalendarInfo } from './redux/path/to/post/actions.js'; и подключен к нему: export default connect(()=>({}), { dispatchNewCalendarInfo })(Component);. Обратите внимание, что для этого вам также необходимо импортировать соединение из «response-redux».

И, конечно, dispatchNewCalendarInfo должен присутствовать в пути actions.js и быть принятым редуктором хранилища. Эта отправка должна изменить информацию, к которой подключен календарь, что заставит его обновить и перерисовать.