Question

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

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

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

Answer 1

每当组件状态更改时，就重新渲染组件。如果您仅使用React，则意味着将更改后的值传递到父组件的状态以强制重新渲染。但是，由于Redux的“存储”功能具有全局状态，因此使您的工作更加轻松。您可以通过更改商店中的适当变量来强制重新渲染。

根据您的情况：该按钮应在其onClick属性中实现此目的： onClick={() => dispatchNewCalendarInfo(payload)}。

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

并且，当然，dispatchNewCalendarInfo应该存在于actions.js路径中，并由商店reducer接受。此分派应该更改日历所连接的信息，这将迫使它进行更新和重新绘制。

Answer 2

如果您不使用Redux，则可以采取另一种方法。

与其让输入函数位于NewShift中，不如让新的shift从父对象那里接收该函数作为道具。

因此，在您的NewShift组件中，您会遇到类似onClick={this.props.submitCalanderInfo()}

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

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

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

2 个答案: