在React钩子中父组件和子组件之间传递数据

将函数传递给子函数， 并通过调用父函数来等待子函数返回值

父母(. . / app.js)

import MyCOMP from "../component/MyCOMP"; //import child component

export default function MyMainPage() {
return(
  <>
    <MyCOMP 
      //pass function to child and wait child passback the changed value
      // 1.Click child component passing function to child

    ParentFunction={(x)=>{
      console.log('Child Pass Back Value',x)  

      // 3. Parent received data
      // after you get the value change you can ultilize another function, useEffect or useState 
    }}/>
  </>
)
}

孩子(. . /组件/ MyCOMP.js)

export default function MyCOMP({ParentFunction}){
  return(
    <>
      <button onClick={()=>{ 

        // 2. Child passing back value to parent 
        ParentFunction("Child reply ANSWER is ","fm 99.8");}}>Click Me</button>

    </>
  )
}

结果

点击按钮后，父类显示“fm99.8”的sting值(该 孩子的价值)

请在下面评论，如果这对你有帮助，或者你有其他的想法

将数据从子组件传递给父组件

在父组件中:

getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

在子组件中:

demoMethod(){
   this.props.sendData(value);
 }

其思想是向子程序发送回调，该子程序将被调用以返回数据

一个使用函数的完整且最小的示例:

App将创建一个子程序，它将计算一个随机数并直接将其发送回父程序，父程序将console.log结果

const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

const App = () => <Child handleRandom={(num) => console.log(num)}/>

从子组件到父组件，如下所示

父组件

class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

子组件

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

我希望这能起作用

将数据从子组件传递到父组件的最佳方法

子组件

handleLanguageCode=()=>(langValue) {
  this.props.sendDatatoParent(langValue)
}

父

<Parent sendDatatoParent={data =>这个。setState({item: data})} />;

您可以使用useState在ParentComponent中创建状态，并将setIsParentData函数作为道具传递到ChildComponent中。

在ChildComponent中，通过prop使用接收函数更新数据，将数据发送回ParentComponent。

我使用这种技术，特别是当我在ParentComponent中的代码太长时，因此我将从ParentComponent创建子组件。通常情况下，它只会向下1级，为了在组件之间共享状态，使用useContext或redux似乎有些过度。

ParentComponent.js

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

export function ParentComponent(){
  const [isParentData, setIsParentData] = useState(True);

  return (
    <p>is this a parent data?: {isParentData}</p>
    <ChildComponent toChild={isParentData} sendToParent={setIsParentData} />
  );
}

ChildComponent.js

import React from 'react';

export function ChildComponent(props){

  return (
    <button onClick={() => {props.sendToParent(False)}}>Update</button>
    <p>The state of isParentData is {props.toChild}</p>
  );
};