React开发中如何将子组件的state变量传递给父组件？

实现逻辑 #

React 中子组件向父组件传值需要通过父组件传递给子组件的回调函数完成：父组件先定义接收数据的方法，通过props传给子组件，子组件在需要传值时调用该回调，将待传递的数据作为参数传入即可。

修改父组件 index.js #

1. 父组件内新增state存储子组件传递的flag值
2. 定义更新该state的回调函数，作为props传给Button组件
   修改后代码如下：

import React, { useState } from "react";
import Button from "./Button/Button"

export default function Index() {
  // 新增state存储子组件传过来的flag值
  const [childFlag, setChildFlag] = useState(true);

  return (
    <>
    {/* 把更新flag的方法作为props传给子组件 */}
    <Button onFlagChange={setChildFlag} />
    <div>Value of flag in Index.js = {childFlag.toString()}</div>
    </>
  );
}

修改子组件 Button.js #

1. 接收父组件传入的onFlagChange回调
2. 点击按钮更新自身flag的同时，调用回调函数将最新flag值传给父组件
   修改后代码如下：

import React, { useState } from "react";
import "./button.css";

export default function Button(props) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(prevFlag => {
        const newFlag = !prevFlag;
        // 调用父组件传入的回调，传递最新的flag值
        props.onFlagChange(newFlag);
        return newFlag;
      });   
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

补充：状态提升优化方案 #

如果flag需要在父子组件中同步使用，更推荐将state提升到父组件统一维护，避免两端重复维护同一份数据：

调整后的index.js

import React, { useState } from "react";
import Button from "./Button/Button"

export default function Index() {
  const [flag, setFlag] = useState(true);
  return (
    <>
    <Button flag={flag} onFlagChange={setFlag} />
    <div>Value of flag in Index.js = {flag.toString()}</div>
    </>
  );
}

调整后的Button.js

import React from "react";
import "./button.css";

export default function Button(props) {
  const clickHandler = () => {
      props.onFlagChange(prev => !prev);   
  };
  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {props.flag.toString()}
      </div>
  );
}

内容的提问来源于stack exchange，提问作者diana