React+Hooks组件传参，子组件内定义的setState传递给父组件

在 React 中，将子组件中的状态更新函数setstate传递给父组件可以通过以下几种方式实现

1.将函数作为 prop 传递：在父组件中定义一个函数，将其作为 prop 传递给子组件，子组件可以调用该函数来更新父组件的状态：

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

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleChildStateUpdate = (newValue) => {
    setCount(newValue);
  };

  return (
    

      
      
Count: {count}
    
  );
}

// 子组件
import React from 'react';

function ChildComponent({ onUpdate }) {
  const handleClick = () => {
    const newValue = 10; // 从子组件中获取新值
    onUpdate(newValue); // 调用父组件传递的函数来更新父组件的状态
  };

  return (
    Update Parent
  );
}

在以上代码中，父组件 ParentComponent 中定义了 handleChildStateUpdate 函数，并将其作为 onUpdate prop 传递给子组件 ChildComponent。子组件中的点击事件触发后，通过调用 onUpdate prop 函数并传递新的值，可以更新父组件的状态。

2.使用 Context API：可以使用 React 的 Context API 在组件层次结构中共享状态和函数。在这种情况下可以将状态更新函数作为 context 的一部分，在父组件和子组件之间共享

// 创建一个 Context
const MyContext = React.createContext();

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

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    
      

        
        
Count: {count}
      
    
  );
}

// 子组件
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const setCount = useContext(MyContext);

  const handleClick = () => {
    const newValue = 10; // 从子组件中获取新值
    setCount(newValue); // 更新父组件的状态
  };

  return (
    Update Parent
  );
}

在这段代码中，创建了一个名为 MyContext 的 Context，并将 setCount 函数作为其值传递给 MyContext.Provider。在父组件中，子组件可以通过 useContext 钩子获取该函数并更新父组件的状态，完成组件之间数据传递