React.FC

最新推荐文章于 2025-10-26 17:59:02 发布

原创最新推荐文章于 2025-10-26 17:59:02 发布 · 4.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

大前端学习专栏收录该内容

24 篇文章

订阅专栏

这篇博客展示了如何在React中使用typescript定义一个FunctionComponent。`NoticeProps`接口定义了组件的props，包括`name`和`address`属性。在`Notice`组件中，利用`useState`钩子管理状态，并通过按钮事件更新状态。博客还包含了一个使用`useState`的例子，展示如何在组件中改变name和count的值。

React.FC<>是react在typescript中使用的一个泛型，FC即是Function Component的缩写，是函数组件，这个泛型里面可以使用useState。

import React, { useState } from 'react';
 
export interface NoticeProps {
  name: string;
  address: string
}
 
const Notice: React.FC<NoticeProps> = (props) => {
  const [ name, setName ] = useState('angle');
  const [ count, setCount ] = useState(1);
  const addCount=()=>{
    setCount(count+1)
  }
 
  console.log(count)
  return <div>
    <p>我是message页面,name是：{name}</p>
    <p>我是message页面,count是：{count}</p>
    <button onClick={() => setName('jane')}>点击我改变name</button>
    <br />
    <button onClick={addCount}>点击我改变count</button>
  </div>;
}
export default Notice;