首页 > 其他分享> 文章详细

在 React 中使用 hooks 与 TypeScript

2020-09-20 12:00:22 阅读：583 来源： 互联网

标签：TypeScript const 函数 hooks React FC 组件接收

在 React 中使用 hooks 与 TypeScript

本文写于 2020 年 9 月 20 日

函数组件与 TS

对于 Hooks 来说是不支持使用 class 组件的。

如何在函数组件中使用 TS 呢？

首先定然是函数的类型，我们需要告诉 TS，这个函数他是个 React 组件。

如果是 JavaScript，我们会这么写函数组件：

import React from 'react';

const MyComponent = () => {
  return <h1>你好，世界</h1>
}

但如果是 TypeScript，我们就应该加上类型了。

React 为我们提供了一个叫做 React.FunctionComponent 的类型，学过小学二年级英语的同学应该都知道，这个类型是 React.函数组件 的意思。如果你觉得这个名字太长了不好写，React 也提供了一个简单版本：React.FC

import React from 'react';

const MyComponent: React.FC = () => {
  return <h1>你好，世界</h1>
}

如果我们希望它能接收到 Children 该怎么写呢？直接写就可以了。

const MyComponent: React.FC = (props) => {
  return (
    <div>
      {props.children}
    </div>
  )
}

但这种情况是不可以接受额外的参数的。我们必须要声明我们函数需要接收哪些参数。

interface Props {
  title: string;
  msg: string;
  list: number[];
}

然后将这个 Props 接口提供给 React.FC，写成：React.FC<Props>。

此时我们函数接收的参数 props 除了函数组件默认可以接收的一些参数，例如 children 之外，还可以接收 Props 接口声明的参数了。

useState

useState 的类型声明如右边：const [count, setCount] = useState<number>(0)。

useRef

useRef 我们通常用来管理 DOM，但也可以用用来管理其他的变量。

这里就说一下取 HTML DOM 元素的类型：HTMLInputElement 等等即可。

（完）

标签：TypeScript,const,函数,hooks,React,FC,组件,接收
来源： https://www.cnblogs.com/xhyccc/p/13699352.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在 React 中使用 hooks 与 TypeScript

在 React 中使用 hooks 与 TypeScript

函数组件与 TS

useState

useRef