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

Question

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

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

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

console.log(hasOptions());

这个 returns true 或 false.

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

如何将此布尔值从我的子组件传递到父组件？

Answer 1

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

Answer 2

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

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

Answer 3

一般来说你不应该那样做。 React 基于单向数据流的思想。数据向下流动，从 parent 到 children，事件则相反。所以正确的解决方案是将状态提升到 parent 组件并将其传递给 children。但如果你绝对需要这样做，你可以将回调传递给 child.

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

  return <Child setHasOptions={setHasOptions} />
}

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

  // ...
}

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

How do I pass a boolean value from my React child to parent component

javascript

reactjs

react-functional-component