React-从“同级”组件调用函数

Posted 2021-04-08

这是我当前的模型，请检查一下，PLZ

import component 1 & 2 

export default class App extends Component {  
  render() {    
    return (

        <Component1/>       
        <Component2/>

    );
  }
}

在组件1中，我有一个函数：运行此函数后，我想在组件2上使用fetchData（）执行下一个操作，但是我找不到从1引用2的方法，因为它们不是亲子？！

答案

一旦执行第一个函数，您必须将回调传递给父对象，然后将prop传递给第二个组件以通知它。

import React from "react";

class Component1 extends React.Component {
  componentDidMount() {
    if (this.props.onPushData) {
      // execute your first function here
      this.props.onPushData();
    }
  }

  render() {
    return <p>Component1</p>;
  }
}

class Component2 extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.dataPushed !== this.props.dataPushed) {
      if (this.props.dataPushed) {
        // execute your second function here
      }
    }
  }

  render() {
    return <p>Component2</p>;
  }
}

export default class extends React.Component {
  state = {
    dataPushed: false
  }

  handleDataPush = () => {
    this.setState({ dataPushed: true })
  }

  render() {
    return (
      <div>
        <Component1 onPushData={this.handleDataPush} />
        <Component2 dataPushed={this.state.dataPushed} />
      </div>
    );
  }
}