React 组件和 useState

Question

我正在使用 React 和 create-react-app w/ React Hooks (^16.7.0-alpha)

我这样叫 useState const [Foo, setFoo] = useState( ({bar}) => <div> Hello {bar}</div> )

我return JSX <div><Foo bar='x'/></div>

我也试过这样<div>{ Foo({bar: 'x'}) }</div>

然而 React 抱怨说 Foo 是一个元素而不是一个组件。

我怎样才能完成这项工作？

Answer 1

当您将函数传递给 useState 时，React 会评估该函数并将返回值设置为初始状态。因此在您的情况下，首先，解构变量 bar 将是未定义的，其次 Foo 将作为 <div> Hello {bar}</div> 而不是 React 组件返回。

此外，您不应该将组件设置为 React 状态。而是简单地将它们定义为功能组件

const Foo = ({bar}) => <div> Hello {bar}</div> );

如果在极端情况下您想要将组件存储在状态中，它的工作方式类似于

  const [Foo, setFoo] = useState(() => ({ bar }) => (
    <div> Hello {bar}</div>
  ));

Working demo