在React中从一个组件访问另一个组件中的函数

Question

我完全不知道如何使用组件内部的函数并且需要在另一个组件中使用。

这是一个简单的程序：

测试.js

export default function Test(){
  const testFunc = () => {
   console.log("it is working")
}
return(
  <div>
   Hi
</div>
)
}

Test2.js

export default function Test2(){
  
return(
  <button onClick={}> // Here I want to use testFunc() from Test file
   Click
</button>
)
}

有人可以解释一下如何实现访问Test2文件中的功能吗？ 预先感谢！

Answer 1

正如 Konrad 在评论中所说，这是不可能的，因为这两个组件没有任何关系（两个组件都没有在内部渲染或相互调用）

您可以做的就是在

Test2.js

中渲染

Test.js

组件并添加回调，如下所示：

测试.js

import Test2 from '...';

export default function Test(){
  const testFunc = () => {
   console.log("it is working")
}


return(
  <div>
   Hi
   <Test2 callbackProp={testFunc} />
</div>
)
}

测试2.js

export default function Test2({callbackProp}){
  
return(
  <button onClick={() => {callbackProp();} }> // Here I want to use testFunc() from Test file
   Click
</button>
)
}

现在，每当渲染 Test.js 时，它也会渲染 Test2（因为 Test 正在渲染 Test2 组件），但每当您单击 Test2 中的按钮时，它都会执行回调，这是从 Test 传递的函数

尽管如此，如果不传递这样的 prop（供将来参考），就不可能从另一个组件调用任何函数

Answer 2

您需要将该函数作为 prop 传递给子组件。你不能，或者我应该说不应该将道具传递给父母，你可以这样做，但不是一种反应方式，也从不推荐。在这种情况下，您要做的只是父级中的逻辑，因为两个兄弟姐妹都需要访问它。

const App = () => {
    const clickHandler = () => {
        alert("Click event")
    }
 return (
    <div className="App">
        <ChildOne clickHandler={clickHandler}/>
        <ChildTwo clickHandler={clickHandler}/>
    </div>
 )
}

}

Answer 3

您可以从父组件传递它，如下所示，也可以使用自定义挂钩

父组件：

import Child from './Child.js'
export default function Parent() {
  
  const functionToBePassed = () => { ... }

  return (
    <Child func={functionToBePassed}>
  )
}

或者您可以通过自定义挂钩来完成

两个文件，第一个是钩子

export default function useFunc() {
  const functionToBeShared = () => {...}

  return { functionToBeShared }
}

//this is any component that wants to use the hook
import useFunc from ./useFunc;
export default function ComponentThatUsesHook() {
  const {functionToBeShared} = useFunc();
}

Answer 4

欢迎来到 React 社区。

To use a function that is inside a component and needs to be used in another component.

您需要一个共同的父级来处理该功能。

假设您有以下结构。

export const ParentComponent = () => {
    return <>
        <Test1 />
        <Test2 />
    <>
}

如果您希望 Test1 中的某些功能影响 Test2，那么您可以在 React 中执行称为提升状态的操作 https://reactjs.org/docs/lifting-state-up.html

ParentComponent

export const ParentComponent = () => {
    const [value, setValue] = useState('')
    return <>
        <Test1 setValue={setValue} />
        <Test2 value={value} />
    <>
}

Test1

export const Test1 = (props) => {
    return <>
        <input onChange={(e) => props.setValue(e.target.vale} />
    <>
}

Test2

export const Test2 = (props) => {
    return <p>{props.value}</p> 
}

当一个组件渲染另一个组件时，它被称为渲染子组件的父组件。将 React 想象为一个树数据结构，其中

App.tsx/jsx

将是树的根。

检查上面的代码，我们可以看到父级中保存了一个函数。这是您可能会考虑放入的函数

Test1

。但是，如果您需要在另一个组件中使用它，则该组件不是当前元素的子元素。您需要找到最近的公共父级并将功能向下传递，如上面的示例所示。

我希望这是有道理的。如果没有，我建议查看官方 React 文档的主要概念部分。 https://reactjs.org/docs/getting-started.html

Answer 5

解决方案

通常，上下文用于在不具有父子关系的许多组件之间共享相同的状态。 代码沙箱

创建上下文

首先，创建一个上下文：

const MyContext = createContext();

和上下文提供者：

const MyContextProvider = ({ children }) => {
  const [myState, setMyState] = useState(0);

  return (
    <MyContext.Provider value={{ myState, setMyState }}>
      {children}
    </MyContext.Provider>
  );
};

和上下文挂钩（为了方便）：

const useMyContext = () => useContext(MyContext);

使用上下文

记住在组件的共同祖先中使用提供者：

function App() {
  return (
    <MyContextProvider>
      <Component1 />
      <Component2 />
    </MyContextProvider>
  );
}

创建您的组件：

function Component1() {
  // as you can see, you can access the function here
  const { setMyState } = useMyContext();
  return (
    <button onClick={() => setMyState((state) => state + 1)}>click me</button>
  );
}

function Component2() {
  // and the value here
  const { myState } = useMyContext();
  return myState;
}

Answer 6

你可以结合使用 useEffect 和 全局状态管理。

在 useEffect 中定义该函数，并使用任何状态管理库定义一个全局状态，并将此状态作为依赖项传递。 现在，不用从任何软件调用该函数，只需从任何软件更新此依赖关系状态，useEffect 将负责调用该函数。

我最近使用它来在用户填写某些表单并且他们修改了状态并尝试导航到应用程序中的其他位置时显示弹出窗口。