无法通过react props.children

Question

我用的是反应。当我将props.children传递给标头组件时，我会得到以下错误。

我认为这种类型是正确的，因为我正在传递反应。

我不知道为什么会发生错误。

error
react-dom.development.js?61bb:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

import React from 'react';
import styled from 'styled-components';

export const Header: React.FC = (children) => {
  return <Head>{children}</Head>;
};

const Head = styled.div`
  background: #8b8b8b;
`;

const Home = () => {
  return (
     <div>
      <Header>
        <span>home</span>
      </Header>
     <div>
  );
};


export default Home;

Answer 1

您刚刚将您的props命名为children，请尝试：

export const Header: React.FC = ({children}) => {
  return <Head>{children}</Head>;
};

Answer 2

让我们从销毁中退一步，因为这会让很多JS初学者感到困惑。

默认情况下，组件接收一个参数，该参数是一组属性，因此我们通常将其称为道具。我们可以从这个道具对象中获得以下特定属性：

export const Header = (props) => {
  console.log(props)
  return <Head>{props.children}</Head>;
};

然后，一旦您开始执行析构操作，您将注意到我们可以以更快、更干净的方式从我们的props对象中获取属性。

export const Header = ({ children }) => {
  console.log(children)
  return <Head>{children}</Head>;
};

交换条件是我们现在不能做props.something，我们需要在重组中加入一些东西.但我们的代码看起来更干净。