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

Question

这是我目前的模型，请检查一下，请import component 1 & 2 export default class App extends Component {    render() {        return (        <Component1/>               <Component2/>    );  }}在组件1中，我有一个函数：pushData（）在运行这个函数后，我想在组件2上使用fetchData（）执行next Data（），但我找不到从1引用2的方法，因为它们不是父子？！

Answer 1

这可以通过很多方式完成，考虑到上面共享的代码具有基于类的实现，我建议使用以下解决方案。

• 首先将函数传递给 Component1，将其命名为 dataPushed。

• 其次，在父级中创建一个状态变量，将其命名为 dataPushed，将其初始化为 false。

• 第三，将函数和状态变量从父级传递到Concept2，分别将其命名为dataFetched和petchData。

现在 Component1 将有自己的函数来推送数据，让我们将此函数称为 pushData。推送数据的逻辑结束后，立即调用传递的 prop 函数 dataPushed。此 props 将使用当前状态更新父状态，即推送数据并将状态变量设置为 true。

现在，此状态变量已使用组件 2 中的组件 DidUpdate 传递给组件 2。我们可以从组件 1 知道 dataPush 的状态，如果这是真的，你可以调用 Component2 内部函数来获取数据。

获取数据后，立即调用传递给此 Component2 的 prop，让父级知道已获取最新数据，并将 dataPushed 的父状态变量设置为 false。

忽略使用的函数和变量名称，随意使用您的。

我已经用代码创建了一个沙盒，

https://codesandbox.io/s/affectionate-forest-5kc68?file=/src/App.js

我希望这能解决您的问题。如果您仍然卡住或不清楚上述任何解释，请告诉我。

Answer 2

从建筑上讲，你试图做的事情不是一个好主意。

例如，如果更改具有要使用的函数的组件，则需要记住更新使用此函数的任何依赖项。这变得难以维护。

React props 实际上使得使用依赖注入模式来解决这个问题变得非常容易。如果你不熟悉依赖注入，这基本上意味着依赖关系来自自上而下，需要这些依赖关系的组件不知道这个依赖关系在哪里，也不会出去获取它们。它只是将依赖项传入。

您可以把函数提升一个级别，让它位于父组件中，而不是尝试使用位于同级组件中的方法。国家也一样。

想象一下这个父母：

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

      </>

    );

  }

}

上述组件创建函数并将其传递给两个组件。然后，每个组件将在需要时调用该函数，例如：Container

class Wannabe extends React.Component {

  handleClick = () => {

    this.props.doCoolThing();

  };

  render() {

    return (

      <div>

        <h2>Wannabe</h2>

        <button onClick={this.handleClick}>click</button>

      </div>

    );

  }

}

然后，应用中拥有该函数的组件将传递到相关的道具：

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>

    );

  }

}

如果你的应用正在增长，并且你计划在一段时间内使用它，则可能需要考虑实现像 Redux 这样的状态管理解决方案。它使状态管理更容易。

如果您要使用功能组件而不是类组件，则可以使用第三个选项，那就是构建自己的自定义钩子。如果你还不熟悉钩子，那可能是一个学习曲线。你可以阅读 React hooks 文档，了解如何做到这一点。

我创建了容器组件和子组件示例的演示。在此示例中，它们都能够更新组件中显示的状态：https://codesandbox.io/s/dry-hill-r425r?file=/src/App.jsCool

Answer 3

在组件 1 中访问组件 2 函数的一种方法是使用 。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>

    );

  }

}

处理您的方案的最佳方法是将函数提升到父级，并将其作为 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();

  };

...