在組件 1 中訪問(wèn)組件 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ù)提升到父級(jí)，并將其作為 prop 傳遞給 .fetchDatacomponent2
喜歡這個(gè)
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();
};
...
