TypeScript函数式组件为何要为输入参数添加{}？

这得从React函数组件的本质说起——所有React函数组件只会接收一个参数：props对象。不管你给组件传多少个属性，React都会把它们打包成一个对象，作为唯一参数传给组件。

拿你给的例子来说：
当你用 <App message="你好" /> 调用组件时，React实际传给App的参数是 { message: "你好" } 这个对象，而不是单独的字符串"你好"。

两种写法的区别 #

• 带{}的写法是对象解构语法：直接从props对象里取出message属性，同时给整个props对象标注类型{ message: string }。这样一来，TypeScript能准确校验你传入的props是否符合要求，你也能直接使用message变量，不用每次写props.message。

  const App = ({ message }: { message: string }) => <div>{message}</div>;
  

• 不带{}的写法相当于把整个props对象当成了message参数：这时候你标注的类型string和实际传入的{ message: "你好" }对象完全不匹配，TypeScript会直接报错。就算忽略报错，你用{message}渲染的也会是整个对象，而不是你想要的字符串内容。

  // 错误写法：实际拿到的message是{ message: "你好" }，不是字符串
  const App = (message: string) => <div>{message}</div>;
  

如果组件需要多个props，比如同时传message和title，解构写法的优势更明显：

const App = ({ message, title }: { message: string; title: string }) => (
  <div>
    <h1>{title}</h1>
    <p>{message}</p>
  </div>
);

简单说，加{}就是为了正确解构React传给组件的props对象，同时让TypeScript能正确校验props的类型。

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