有沒有辦法從另一個孩子調用子組件的功能？

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} />