TA貢獻1801條經驗 獲得超8個贊
這可以通過很多方式完成，考慮到上面共享的代碼具有基于類的實現(xiàn)，我建議使用以下解決方案。
首先將函數(shù)傳遞給 Component1，將其命名為 dataPushed。
其次，在父級中創(chuàng)建一個狀態(tài)變量，將其命名為 dataPushed，將其初始化為 false。
第三，將函數(shù)和狀態(tài)變量從父級傳遞到Concept2，分別將其命名為dataFetched和petchData。
現(xiàn)在 Component1 將有自己的函數(shù)來推送數(shù)據，讓我們將此函數(shù)稱為 pushData。推送數(shù)據的邏輯結束后，立即調用傳遞的 prop 函數(shù) dataPushed。此 props 將使用當前狀態(tài)更新父狀態(tài)，即推送數(shù)據并將狀態(tài)變量設置為 true。
現(xiàn)在，此狀態(tài)變量已使用組件 2 中的組件 DidUpdate 傳遞給組件 2。我們可以從組件 1 知道 dataPush 的狀態(tài)，如果這是真的，你可以調用 Component2 內部函數(shù)來獲取數(shù)據。
獲取數(shù)據后，立即調用傳遞給此 Component2 的 prop，讓父級知道已獲取最新數(shù)據，并將 dataPushed 的父狀態(tài)變量設置為 false。
忽略使用的函數(shù)和變量名稱，隨意使用您的。
我已經用代碼創(chuàng)建了一個沙盒，
https://codesandbox.io/s/affectionate-forest-5kc68?file=/src/App.js
我希望這能解決您的問題。如果您仍然卡住或不清楚上述任何解釋，請告訴我。
TA貢獻1875條經驗 獲得超5個贊
從建筑上講，你試圖做的事情不是一個好主意。
例如，如果更改具有要使用的函數(shù)的組件，則需要記住更新使用此函數(shù)的任何依賴項。這變得難以維護。
React props 實際上使得使用依賴注入模式來解決這個問題變得非常容易。如果你不熟悉依賴注入，這基本上意味著依賴關系來自自上而下，需要這些依賴關系的組件不知道這個依賴關系在哪里，也不會出去獲取它們。它只是將依賴項傳入。
您可以把函數(shù)提升一個級別，讓它位于父組件中，而不是嘗試使用位于同級組件中的方法。國家也一樣。
想象一下這個父母：
class Container extends React.Component {
state = {
counter: 0
};
reallyCoolFunction = () => {
this.setState({ counter: this.state.counter + 1 });
};
render() {
return (
<>
<Cool
counter={this.state.counter}
doCoolThing={this.reallyCoolFunction}
/>
<Wannabe doCoolThing={this.reallyCoolFunction} />
</>
);
}
}
上述組件創(chuàng)建函數(shù)并將其傳遞給兩個組件。然后，每個組件將在需要時調用該函數(shù)，例如：Container
class Wannabe extends React.Component {
handleClick = () => {
this.props.doCoolThing();
};
render() {
return (
<div>
<h2>Wannabe</h2>
<button onClick={this.handleClick}>click</button>
</div>
);
}
}
然后，應用中擁有該函數(shù)的組件將傳遞到相關的道具：
class Cool extends React.Component {
handleClick = () => {
this.props.doCoolThing();
};
render() {
return (
<div>
<h2>Cool</h2>
<p>{this.props.counter}</p>
<button onClick={this.handleClick}>click</button>
</div>
);
}
}
如果你的應用正在增長，并且你計劃在一段時間內使用它，則可能需要考慮實現(xiàn)像 Redux 這樣的狀態(tài)管理解決方案。它使狀態(tài)管理更容易。
如果您要使用功能組件而不是類組件，則可以使用第三個選項，那就是構建自己的自定義鉤子。如果你還不熟悉鉤子，那可能是一個學習曲線。你可以閱讀 React hooks 文檔，了解如何做到這一點。
我創(chuàng)建了容器組件和子組件示例的演示。在此示例中，它們都能夠更新組件中顯示的狀態(tài)：https://codesandbox.io/s/dry-hill-r425r?file=/src/App.jsCool
TA貢獻1815條經驗 獲得超13個贊
在組件 1 中訪問組件 2 函數(shù)的一種方法是使用 。refs
工作演示在這里。
代碼段：
export default class App extends React.Component {
ref = React.createRef();
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Component1 comp2Ref={this.ref} />
<Component2 ref={this.ref} />
</div>
);
}
}
// Component1.js
export default class Component1 extends React.Component {
pushData = () => {
// make the first api call..
console.log("comp 1 fun");
// now call component2 function
console.log(this.props);
this.props.comp2Ref.current.fetchData();
};
render() {
return (
<div className="App">
<h1>component 1</h1>
<button onClick={this.pushData}>push data button</button>.
</div>
);
}
}
// Component2.js
export default class Component2 extends React.Component {
fetchData = () => {
console.log("comp 2 fun");
};
render() {
return (
<div className="App">
<h1>component 2</h1>
</div>
);
}
}
處理您的方案的最佳方法是將函數(shù)提升到父級，并將其作為 prop 傳遞給 .fetchDatacomponent2
喜歡這個
export default class App extends React.Component {
state = {
data: []
};
fetchData = () => {
// fetch the data and update the state(data) and pass it as prosp in component 2
console.log("comp 2 fun");
};
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Component1 fetchData={this.fetchData} />
<Component2 data={this.state.data} fetchData={this.fetchData} />
</div>
);
}
}
// Component 1 pushData function
...
pushData = () => {
// make the first api call..
console.log("comp 1 fun");
// now call component2 function
console.log(this.props);
this.props.fetchData();
};
...
舉報