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，将其命名为&nbsp;dataPushed。其次，在父级中创建一个状态变量，将其命名为&nbsp;dataPushed，将其初始化为 false。第三，将函数和状态变量从父级传递到Concept2，分别将其命名为dataFetched和petchData。现在 Component1 将有自己的函数来推送数据，让我们将此函数称为&nbsp;pushData。推送数据的逻辑结束后，立即调用传递的 prop 函数&nbsp;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 {&nbsp; state = {&nbsp; &nbsp; counter: 0&nbsp; };&nbsp; reallyCoolFunction = () => {&nbsp; &nbsp; this.setState({ counter: this.state.counter + 1 });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <Cool&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter={this.state.counter}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; doCoolThing={this.reallyCoolFunction}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Wannabe doCoolThing={this.reallyCoolFunction} />&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; );&nbsp; }}上述组件创建函数并将其传递给两个组件。然后，每个组件将在需要时调用该函数，例如：Containerclass Wannabe extends React.Component {&nbsp; handleClick = () => {&nbsp; &nbsp; this.props.doCoolThing();&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Wannabe</h2>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.handleClick}>click</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}然后，应用中拥有该函数的组件将传递到相关的道具：class Cool extends React.Component {&nbsp; handleClick = () => {&nbsp; &nbsp; this.props.doCoolThing();&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Cool</h2>&nbsp; &nbsp; &nbsp; &nbsp; <p>{this.props.counter}</p>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.handleClick}>click</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}如果你的应用正在增长，并且你计划在一段时间内使用它，则可能需要考虑实现像 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 {&nbsp; ref = React.createRef();&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; &nbsp; <Component1 comp2Ref={this.ref} />&nbsp; &nbsp; &nbsp; &nbsp; <Component2 ref={this.ref} />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// Component1.jsexport default class Component1 extends React.Component {&nbsp; pushData = () => {&nbsp; &nbsp; // make the first api call..&nbsp; &nbsp; console.log("comp 1 fun");&nbsp; &nbsp; // now call component2 function&nbsp; &nbsp; console.log(this.props);&nbsp; &nbsp; this.props.comp2Ref.current.fetchData();&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>component 1</h1>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.pushData}>push data button</button>.&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// Component2.jsexport default class Component2 extends React.Component {&nbsp; fetchData = () => {&nbsp; &nbsp; console.log("comp 2 fun");&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>component 2</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}处理您的方案的最佳方法是将函数提升到父级，并将其作为 prop 传递给 .fetchDatacomponent2喜欢这个export default class App extends React.Component {&nbsp; state = {&nbsp; &nbsp; data: []&nbsp; };&nbsp; fetchData = () => {&nbsp; &nbsp; // fetch the data and update the state(data) and pass it as prosp in component 2&nbsp; &nbsp; console.log("comp 2 fun");&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; &nbsp; <Component1 fetchData={this.fetchData} />&nbsp; &nbsp; &nbsp; &nbsp; <Component2 data={this.state.data} fetchData={this.fetchData} />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// Component 1 pushData function...&nbsp;pushData = () => {&nbsp; &nbsp; // make the first api call..&nbsp; &nbsp; console.log("comp 1 fun");&nbsp; &nbsp; // now call component2 function&nbsp; &nbsp; console.log(this.props);&nbsp; &nbsp; this.props.fetchData();&nbsp; };...