在 React 中单击来自不同组件的按钮时触发另一个组件中的函数

Posted 2023-04-14

【中文标题】在 React 中单击来自不同组件的按钮时触发另一个组件中的函数

【英文标题】：Trigger a function in another component on click a button from a different component in React

【发布时间】：2021-02-14 07:36:55

【问题描述】：

当我单击componentA 中的开始按钮时，我试图在不同的componentB 中触发开始功能

注意：两个组件都不是子组件的父组件

组件 A

import React from "react"

function ComponentA(props)         
  return (
    <div>
      <button>Start</button>
    </div>
  )


export default ComponentA; 

组件 B

import React from "react";

function ComponentB(props) 
  const [isStarted, setStarted] = React.useState(false);

  const start = () => setStarted(true);

  return <div>isStarted ? "Starting..." : "Not Starting.."</div>;


export default ComponentB;

【问题讨论】：

使用 Redux 或类似的东西，即 observables

上下文 api 呢？

它们必须是某物的子对象，即使它只是窗口。 start() 和关联的状态应该从两者的父级传递下来。

【参考方案1】：

一种方法是在 ComponentA 上创建回调 prop，更改 ComponentA 的父组件的状态并通过 prop 将其传递给 ComponentB，并使用 useEffect 捕获该 prop 更改。

例子：

家长

function Parent()
  const [started, setStarted] = useState(false)

  return(
    <div>
      <ComponentA onClick=() => setStarted(true)/>
      <ComponentB started=started/>
    </div>
  )

组件A

function ComponentA(onClick)
  return(
    <div>
      <button onClick=() => onClick()/>
    </div>
  )

组件B

function ComponentB(started) 
  const [isStarted, setStarted] = React.useState(started);

  useEffect(() => 
    setStarted(started)
  , [started])

  return <div>isStarted ? "Starting..." : "Not Starting.."</div>;

另一种方法是使用 useContext：

https://reactjs.org/docs/hooks-reference.html#usecontext

https://reactjs.org/docs/context.html

老实说，我有点懒得再举一个我认为更糟的例子。这是一个使用可能有用的 useContext 的示例。 https://***.com/a/54738889/7491597

【讨论】：

请问如何使用useContext？

我建议不要在您的应用程序中到处使用 useContext，尤其是当只有一个组件需要来自另一个组件的信息时（在您的情况下）。 useContext 应该只在多个组件需要相同的应用程序范围数据时才使用。话虽如此，您可以在此处找到文档：reactjs.org/docs/context.html

好的，你能用我上面的问题做一个快速演示吗？