使用TypeScript开发React应用(二) - 创建组件

栏目: 服务器 · 发布时间: 5年前

内容简介:继续前面的文章下面看下如何进行开发我们要写一个Hello组件。 该组件将采用我们想要问候的任何人的名字(我们称之为名称),以及可选的跟踪感叹号的数量(passioniasmLevel)。

继续前面的文章 使用TypeScript开发React应用(一) 介绍了基础的React+TypeScript应用的搭建

下面看下如何进行开发

创建组件

我们要写一个Hello组件。 该组件将采用我们想要问候的任何人的名字(我们称之为名称),以及可选的跟踪感叹号的数量(passioniasmLevel)。

当我们编写类似 <Hello name="Daniel" enthusiasmLevel={3} /> 的内容时,组件应该渲染为类似 <div>Hello Daniel!!!</div> 的内容。 如果未指定enthusiasmLevel,则组件应默认显示一个感叹号。 如果enthusiasmLevel为0或负数,则应该抛出错误。

我们写一个Hello.tsx:

// src/components/Hello.tsx

import * as React from 'react';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

function Hello({ name, enthusiasmLevel = 1 }: Props) {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic.');
  }

  return (
    <div className="hello">
      <div className="greeting">
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      </div>
    </div>
  );
}

export default Hello;

function getExclamationMarks(numberMarks: number) {
  return Array(numberMarks + 1).join('!');
}

请注意,我们定义了一个名为Props的类型,它指定了我们的组件将采用的属性。 name是一个必需的字符串,而enthusiasmLevel是一个可选的数字(你可以从我们在其名字后面写出来的?)告诉你。

我们还将Hello编写为无状态函数组件(SFC)。 具体来说,Hello是一个函数,它接受Props对象,并挑选(或"析构")它将传递的所有属性。 如果我们的Props对象中没有给出enthusiasmLevel,它将默认为1。

编写函数是React允许我们创建组件的两种主要方式之一。 如果我们想要,我们可以把它写成一个类,如下所示:

class Hello extends React.Component<Props, object> {
  render() {
    const { name, enthusiasmLevel = 1 } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(enthusiasmLevel)}
        </div>
      </div>
    );
  }
}

当我们的组件实例具有某种状态或需要处理生命周期钩子时,类很有用。 但是我们并不需要在这个特定的例子中考虑状态 - 事实上,我们在React.Component<Props, object>中将它指定为对象,所以编写SFC在这里更有意义,但重要的是要知道如何 写一个类组件。

请注意,该类扩展了React.Component<Props, object>。 这里的TypeScript特定位是我们传递给React.Component的类型参数:Props和object。 这里,Props是我们类的this.props的类型,object是this.state的类型。 我们将稍微返回组件状态。

现在我们已经编写了我们的组件,让我们将组件导入到index.tsx并用 <Hello ... /> 的渲染替换我们的 <App /> 渲染。

首先,我们将它导入文件的顶部:

import Hello from './components/Hello';

然后改变render函数的调用

ReactDOM.render(
  <Hello name="Durban" enthusiasmLevel={3} />,
  document.getElementById('root') as HTMLElement
);

类型断言

document.getElementById('root') as HTMLElement 这行代码在语法上称为类型断言,有时也称为强制转换。当你比类型检查器更清楚时,这是告诉TypeScript表达式的真实类型的有用方法。

在这种情况下我们需要这样做的原因是getElementById的返回类型是 HTMLElement | null 。 简而言之,当getElementById找不到具有给定id的元素时,它返回null。 我们假设getElementById实际上会成功,所以我们需要使用as语法来说服TypeScript。

TypeScript还有一个尾随的"bang"语法(!),它从前一个表达式中删除null和undefined。 所以我们可以编写document.getElementById('root')!,但在这种情况下我们想要更明确一些。

未完待续...


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

逆流而上

逆流而上

阿里巴巴集团成长集编委会 / 电子工业出版社 / 2017-11 / 59.00

本书是阿里巴巴集团荣耀背后的技术血泪史。全书通过分享业务运行过程中各个领域发生的典型“踩坑”案例,帮助大家快速提升自我及团队协作,学习到宝贵的处理经验及实践方案,为互联网生产系统的稳定共同努力。从基础架构、中间件、数据库、云计算、大数据等技术领域中不断积累经验,颠覆技术瓶颈,不断创新以适应不断增长的需求。 本书主要面向互联网技术从业人员和在校师生,使读者能够通过此书基本了解阿里在各技术领域的能力,......一起来看看 《逆流而上》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具