反应组件和useState

Question

我正在与带有React Hooks（^ 16.7.0-alpha）的create-react-app一起使用React

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

我以<div><Foo bar='x'/></div>的形式返回JSX

我也尝试过这样的<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