如何从既不是子组件也不是父组件的组件调用函数？答案

【问题标题】：How do I call a function from component that is not a child nor parent?如何从既不是子组件也不是父组件的组件调用函数？
【发布时间】：2021-07-16 13:23:55
【问题描述】：

组件 A

常量查询 = ....

getData(查询);

组件 B

//这里我想用组件的A参数来调用它

【问题讨论】：

如果我理解正确，你想在组件 B 中调用 getData 函数吗？
你可以使用redux，你应该使用dispatch

标签： javascript reactjs

【解决方案1】：

您可能会有一个围绕这两个组件的父级。您可以使用父共享功能：

function Parent() {
    const [ dataWithQuery, setDataWithQuery ] = useState(null);

    return (
        <>
            <ComponentA setDataWithQuery={ setDataWithQuery  } />
            <ComponentB dataWithQuery={ dataWithQuery } />
        </>
    );
}

在组件 A 中，您将拥有：

function ComponentA({ setDataWithQuery }) {
    const yourQueryHere = '...'

    function getData(query) { ... }

    useEffect(() => {
        setDataWithQuery(() => getData(yourQueryHere));
    }, []);

    ...
}

请注意我 setDataWithQuery(...) 所在的行，我创建了一个新函数，该函数使用您的查询变量调用 getData。这是保存函数参数以在 ComponentA 之外使用的方式。

在组件 B 中，您将拥有：

function ComponentB({ dataWithQuery }) {
    useEffect(() => {
        if(dataWithQuery != null) {
            const data = dataWithQuery();
        }
    }, [ dataWithQuery ]);


    ...
}

但是没有真正的理由来构建这样的结构。为什么不将 ComponentA 的查询传递给父级，使用该查询从父级获取数据，然后将该数据传递给 ComponentB？

编辑：您也可以查找React Contexts 进行共享，而无需上下传递父/子。仍然需要有父母陪伴。

【讨论】：

好的，如何传递函数，而不是实际函数只是引用，以便函数可以使用父级的参数，我该怎么做？

【解决方案2】：

您的意思是，您想将查询传递给 ComponentA，从其中获取数据，然后在 ComponentB 中使用该数据？

如果这不是您想要的，并且您想在每个查询中使用相同的查询，那么只需将查询参数保留在它们上方的组件中并在 props 中传递它们。

如果前者是你想要的：

父组件：

import "./styles.css";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import { useState } from "react";

    export default function App() {
      const [query, setQuery] = useState("get some data");
      const [data, setData] = useState({});
      return (
        <div className="App">
          <ComponentA query={query} setData={setData} />
          <ComponentB data={data} />
        </div>
      );

组件 A

import React, { useEffect } from "react";

function ComponentA({ query, setData }) {
  useEffect(() => {
    if (query !== "") {
      getData(query);
    }
  }, [query]);

  async function getData(query) {
    //do some stuff
    const result = { id: "1", message: "I am data" };
    setData(result);
  }

  return (
    <div>
      <h1>I am component A</h1>
    </div>
  );
}

export default ComponentA;

组件B

function ComponentB({ data }) {

  function doSomethingWithComponentAData() {
    //do stuff with the data from componentA
  }
  return (
    <div>
      <h1>I am Component B, I got data: {data.id}</h1>
    </div>
  );
}

export default ComponentB;

【讨论】：

我只想在特定条件下从组件 B 调用一个函数，只是为了刷新组件 A 中的数据。（使用来自组件 A 的查询，因为不想将它传递给组件 B 只需使用它在 Component 的 A 函数中作为参数。

【解决方案3】：

试试这个：

// Component A

export const getData = () => { // ... }

// Component B

import { getData } from './ComponentA'

const result = getData()

【讨论】：

组件不是模块；您不能从它们导入和导出。