反应组件和使用情况

Question

我正在与 create-react-app w/react钩子（^16.7.0-alpha）

一起使用React

我正在调用 useState，因为 const [Foo, setFoo] = useState( ({bar}) => <div> Hello {bar}</div> )

i返回JSX，如<div><Foo bar='x'/></div>

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

但反应抱怨说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>
  ));

工作演示