有没有办法从另一个孩子调用子组件的功能？

Question

我正在为使用ES6 JavaScript构建的开源React / Redux应用程序做出贡献。 我是React / Redux的新手，所以我遇到了一些麻烦。

我有一个父类，它呈现两个不同的React组件。 第一个组件包含一些有关事件的输入字段（称为NewShift）。 第二个组件是呈现这些事件的日历（称为索引）。

一旦用户填写输入字段并按下第一个组件中的按钮，我希望能够在第二个组件中重新呈现日历。 如果重新渲染功能在日历组件中，我如何从输入字段组件（两个子组件）中调用它。

Answer 1

每当更改组件状态时，React都会重新呈现组件。 如果你只使用React，这意味着将更改的值传递到父组件的状态以强制重新渲染。 但是，Redux使您更容易，因为它的“存储”功能是一个全局状态。 您可以通过更改商店中的适当变量来强制重新渲染。

鉴于你的情况：按钮应该在它的onClick属性中得到这个： onClick={() => dispatchNewCalendarInfo(payload)} 。

dispatchNewCalenderInfo也应该由组件import { dispatchNewCalendarInfo } from './redux/path/to/post/actions.js'; ： import { dispatchNewCalendarInfo } from './redux/path/to/post/actions.js'; 并连接到它： export default connect(()=>({}), { dispatchNewCalendarInfo })(Component); 。 注意，您还需要从'react-redux'导入连接。

当然，dispatchNewCalendarInfo应该存在于actions.js路径中，并由store reducer接受。 此调度应更改日历所连接的信息，这将强制它更新和重新绘制。

Answer 2

如果您没有使用Redux，那么您可以采用另一条路径。 新的移位不是让输入的函数在NewShift中，而是从父级接收函数作为prop。

所以在你的NewShift组件中，你会有像onClick={this.props.submitCalanderInfo()}

submitCalanderInfo函数将是父组件的一部分。 您可能希望将此新信息保存到父组件的状态，然后使用该状态更新日历或索引组件上的道具。 所以索引可能看起来像这样：

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