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

Question

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

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

我知道将数据从父级传递到我们使用的子项，以及将子项传递到父级，我们必须使用回调函数，但我不确定在这种情况下如何使用回调函数。我已经在定义功能等方面玩了一下，但似乎没有什么真正起作用。

我的主文件.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;

我的孩子.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 />
}

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