React函数式Header组件传title参数后页面空白不显示，是什么原因？

问题原因 #

你最初定义的函数式组件参数接收逻辑错误：

• React 函数式组件的第一个参数永远是完整的 props 对象，你将第一个参数直接命名为title时，实际拿到的是{title: "abc"}这个整体对象，而非title属性的值。React 不会直接渲染普通对象，因此页面显示空白。
• 你后续写的类组件是通过this.props.title读取props对象下的属性，符合React的传参规则，因此可以正常渲染。

修复方案 #

两种修改方式均可：

1. 先拿完整props对象再读取对应属性：

import React from "react";

export const Header = (props: {title: string}) => {
    return (
        <div>
            <h1>{props.title}</h1>
        </div>
    )
};

2. 参数位置直接解构取出需要的属性：

import React from "react";

export const Header = ({title}: {title: string}) => {
    return (
        <div>
            <h1>{title}</h1>
        </div>
    )
};

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