如何单击父组件中的按钮并访问子组件中的数据？

Question

我正在研究 ReactJS 的概念，偶然发现了这个非常有趣的案例，

我的父组件中有一个按钮，单击该按钮将访问子组件中定义的简单字符串。

我知道将数据从父母传递给我们使用的孩子，并且将数据从孩子传递给父母，我们必须使用回调函数，但我不确定在这种情况下如何使用回调函数。我在定义函数等方面玩了一些，但似乎没有什么真正起作用。

我的 Main.js 文件

import React from "react";
import Child from "./Child";

function handleClick(props) {
  console.log("clicked");
}

function Main(props) {
  return (
    <div>
      <button onClick={handleClick}>click</button>
      {console.log(props)}
    </div>
  );
}

export default Main;

我的 Child.js 组件

import React from "react";

function statement() {
  return "A sentence";
}

function Child(props) {
  //   let sentence = "This is from the child component";
  return (
    <div>
      <p>The child says {props.name} </p>
    </div>
  );
}

export default Child;

感谢您的阅读，如果这听起来太简单，请见谅。任何帮助将不胜感激。

Answer 1

您可以在父组件中创建一个 ref 并将其传递给子组件，然后通过该 ref 访问子状态，例如：

function Main(props) {
  const child = useRef()
  const handleClick = () => {
    // get child state
    child.current.getState()
  }
  return <Child innerRef={child} />
}

function Child({ innerRef }) {
  const [someState, setSomeState] = useState()
  useImperativeRef(innerRef, () => ({ getState: () => someState }), [someState])

  return <SomeComponent />
}

您可以在官方文档中阅读有关上述代码的更多信息。