如何将布尔值从我的 React 子组件传递给父组件答案

【问题标题】：How do I pass a boolean value from my React child to parent component如何将布尔值从我的 React 子组件传递给父组件
【发布时间】：2021-10-29 21:15:46
【问题描述】：

在我的 React 子组件中，我可以访问一个变量 options，它返回一个对象数组。

在这个组件中，我有一个检查是否有选项的函数：

const hasOptions = () => options.length > 0;

console.log(hasOptions());

这将返回 true 或 false。

在我的父组件中，我需要这个布尔值来有条件地添加一些样式（基于布尔值）。

如何将这个布尔值从我的子组件传递给父组件？

【问题讨论】：

这能回答你的问题吗？ How to pass data from child component to its parent in ReactJS?

标签： javascript reactjs react-functional-component

【解决方案1】：

可以在父组件中创建状态变量，然后将setXXX方法传递给子组件，在子组件中调用setXXX方法将布尔变量传递给父组件。

【讨论】：

【解决方案2】：

如果可能，让父母访问options 并让它向孩子提供hasOptions，而不是反过来做。如果可能，状态应为“lifted up”组件层次结构（从子级到父级）。

如果不可能，你必须让父母为孩子提供一个功能（作为道具），然后它可以用来告诉父母它是否有选项。这更复杂，并且可能导致不必要的渲染（例如，父级在没有附加样式的情况下渲染子级，子级调用父级，父级必须使用附加样式重新渲染）。

【讨论】：

【解决方案3】：

一般来说，您不应该这样做。 React 基于单向数据流的思想。数据向下流动，从父级到子级，反之亦然。所以正确的解决方案是将状态提升到父组件并将其传递给子组件。但是如果你绝对需要这样做，你可以将回调传递给孩子。

function Parent() {
  const [hasOptions, setHasOptions] = useState(false);

  return <Child setHasOptions={setHasOptions} />
}

function Child({ setHasOptions }) {
  useEffect(() => {
    setHasOptions(hasOptions())
  }, [options.length, setHasOptions ]);

  // ...
}

【讨论】：