Реагируйте Компонент и используйте состояние - PullRequest
Новая
       3

Реагируйте Компонент и используйте состояние

0 голосов
/ 18 декабря 2018

Я использую React с create-react-app с React Hooks (^ 16.7.0-alpha)

Я звоню useState как таковой const [Foo, setFoo] = useState( ({bar}) => <div> Hello {bar}</div> )

Я возвращаюсьJSX как таковой <div><Foo bar='x'/></div>

Я тоже пробовал вот так <div>{ Foo({bar: 'x'}) }</div>

И все же React жалуется, что Foo является элементом, а не компонентом.

Как я могусделать эту работу?

1 Ответ

0 голосов
/ 18 декабря 2018

Когда вы передаете функцию в useState реагирует, оценивает эту функцию и устанавливает возвращаемое значение в качестве исходного состояния.и, следовательно, в вашем случае, во-первых, деструктурированная переменная bar будет неопределенной, а во-вторых, Foo будет возвращено как <div> Hello {bar}</div>, а не как компонент React.

Также вам не следует устанавливать компонент вРеагировать состояние.Вместо этого просто определите их как функциональный компонент 

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

Если вообще в крайнем случае вы хотите сохранить компонент в состоянии, он будет работать как 

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

Рабочая демонстрация

...