如何在React中将布尔值从子组件传递至父组件

React 中子组件向父组件传值的标准方案是父组件传递回调函数给子组件，子组件触发回调将需要的值作为参数回传，具体实现步骤如下：

步骤1：父组件侧定义状态与回调函数 #

在父组件中声明用于接收子组件布尔值的状态，以及接收值的回调函数，将回调作为props传递给子组件：

// 父组件代码
import { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  // 定义状态存储子组件回传的布尔值
  const [childHasOptions, setChildHasOptions] = useState(false);

  // 回调函数，接收子组件传过来的布尔值更新状态
  const handleHasOptionsChange = (hasOptionsVal) => {
    setChildHasOptions(hasOptionsVal);
  };

  return (
    <div className={childHasOptions ? 'has-options-style' : 'no-options-style'}>
      {/* 将回调函数作为props传给子组件 */}
      <ChildComponent onHasOptionsChange={handleHasOptionsChange} />
    </div>
  );
}

export default ParentComponent;

步骤2：子组件侧触发回调传值 #

子组件接收父组件传过来的回调函数，在options值变化、或者组件初始化/更新时，计算布尔值并触发回调回传：

// 子组件代码
import { useEffect } from 'react';

function ChildComponent({ onHasOptionsChange }) {
  // 你原本的options变量和判断函数
  const options = [/* 你的对象数组 */];
  const hasOptions = () => options.length > 0;

  // 监听options变化，每次变化都把最新的布尔值回传给父组件
  useEffect(() => {
    const val = hasOptions();
    onHasOptionsChange(val);
  }, [options, onHasOptionsChange]);

  // 子组件其他逻辑...
  return <div>子组件内容</div>;
}

export default ChildComponent;

特殊场景优化 #

如果options本身就是父组件传递给子组件的props，那你完全可以直接在父组件中计算options.length > 0的布尔值，不需要走子组件回传的逻辑，减少冗余代码。

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