React/03.React中使用TS/02.函数默认值.tsx

import ReactDOM from "react-dom";

// 函数的默认值

type Props = { name: string; age?: number}

// const Hello: FC<Props> = ( { name, age } ) => (
//   <div>我是：{name}, 我 { age } 岁</div>
// )

// 提供默认属性
// Hello.defaultProps = {
//   age: 18                     // age 是可选属性，当没给 age 的值时，默认 age 的值为 18
// }


// 简化写法
const Hello = ( { name, age = 18 }: Props ) => (         // 给 age 添加默认值 18
  <div>我是：{name}, 我 { age } 岁</div>
)

const App = () => <div>
  {/* name 是必填的 */}
  <Hello name="jack" />
</div>

ReactDOM.render(<App />, document.getElementById('root'))