React 传递 props.children 至 Header 组件时报对象不可作为 React 子元素错误

错误根因 #

React 函数组件的第一个入参是完整的 props 聚合对象，你当前的 Header 组件直接将入参命名为 children，实际拿到的是结构为 {children: 你传入的React元素} 的对象，直接将对象作为子元素渲染，就会触发「对象不能作为React子元素」的报错。

修复方案 #

方案1：解构props取children #

直接在入参位置解构出props里的children属性即可：

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;
`;

方案2：显式从props读取children #

也可以保留props入参，再读取其children属性：

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

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

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

注：你使用的React.FC类型定义已经内置了children属性的类型声明，不需要额外手动补充children的类型。

内容的提问来源于stack exchange，提问作者yuturo