reactjs - 如何在 React 功能组件中将数据从孙子传递到父组件？

Question

我在 GrandChild.tsx 中有一个函数

孙子.tsx

function grandChild(){  
   function a(){ someVariables } 
}

父.tsx

function Parent(){
  console.log(someVariables) 
}

如何将数据从 GrandChild 传递到父组件？

我试过这个方法：

父.tsx

function Parent(){ 

const (msg, setMsg) = useState('') function getData(){ <Child someVar = {msg}/> }

孩子.tsx

interface ChildProps {
 someVar: any;
}

function Child(props: ChildProps){
const (mediator, setMediator) = useState('') 

function mediateData(){ <Child someVariables = {msg}/> } }

孙子.tsx

interface GrandChildProps {
 someVariables: any;
}

function GrandChild(props: GrandChildProps){
const (data, sendData) = useState('') 
function a(){ <GrandChild someVariables = {data}/> }

标签： reactjsparent-childreact-functional-component

Answer 1

我从我的评论中修复了代码框：https ://codesandbox.io/s/determined-pine-1z9ms

这里的想法是传递“setMsg”函数并从孙子调用它