ad新建⼀个componen的类_如何创建⼀个类组件
classcomponent
今天⼤家⼀起聊聊如何使⽤TS3的⽅式创建组件。声明React组件的⽅式共有两种：使⽤类的⽅式声明组件(类组件类组件)和使⽤函数的⽅式声明组件(函数组件功能组件)。接下来笔者给⼤家聊聊使⽤类的⽅式声明组件。
通过例⼦带领⼤家创建⼀个确认的对话框组件，类似警报对话框，有标题，内容，确认和取消按钮组件完成后的效果如下图所⽰：
使⽤create-react-app⽅式创建项⽬
本⽰例我们将使⽤create-react-app创建项⽬
1，创建项⽬
打开控制台，通过以下命令创建我们的React TS3项⽬：
npx create-react-app my-components --typescript
2，安装tslint依赖
接下来，为了保证项⽬代码质量，我们安装tslint的相关依赖：
cd my-components
npm install tslint tslint-react tslint-config-prettier --save-dev
3，然后添加tslint.json⽂件，配置相关规则
{
“extends”：[ “tslint：recommended” ，“tslint-react” ，“tslint-config-prettier” ]，
“rules”：{
“ordered-imports”：false ，
“object-literal-sort-keys”：false ，
“no-debugger”：false ，
“no-console”：false ，
}，
“linterOptions”：{
“exclude”：[
“config / ** / * .js ” ，“node_modules / ** / * .ts “ ，”coverage / lcov-report / * .js“ ] } }
4，运⾏项⽬
接下来安装相关依赖，并启动项⽬：
npm install
npm start
5，修改样式
打开app.css⽂件，我们进⾏⼀些样式调整其头部的⾼度，修改部分如下：
.
..
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 20vmin;
}
.App-header {
background-color: #282c34;
min-height: 40vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
创建第⼀个类组件
1、创建 Confirm.tsx ⽂件
我们会在 src ⽬录下看到 App.tsx ⽂件，这是项⽬中为我们默认创建的组件，使⽤的是函数的⽅式创建组件，这⾥先不做介绍，接下来的⽂章会有介绍。我们先⽤类的声明⽅式创建⼀个单独的组件，在 src ⽬录创建⼀个 Confirm.tsx ⽂件。初始化的内容结构如下：
import * as React from "react";
class Confirm extends React.Component {
}
export default Confirm;
2、添加 render ⽅法
接下来我们添加 render ⽅法
...
class Confirm extends React.Component {
public render() {
return (
);
}
}
.
..
3、实现 render ⽅法：
接下来我们实现上述的 render ⽅法，这⾥主要定义了组件的样式布局，内容部分是不是很像HTML呢，你会发现有个不太⼀样的地⽅className，这种语法叫做JSX，这⾥先不做介绍，稍后会介绍到：
import * as React from "react";
class Confirm extends React.Component {
public render() {
return (
This is where our title should go
This is where our content should go
Cancel
Okay
);
}
}
4、 在 App.tsx 引⼊ Confirm 组件
import Confirm from "./Confirm";
...
...
...
5、定义 Confirm.css 的样式
css怎么创建由于组件没有样式，还过于丑陋，接下来在 src ⽬录新建 Confirm.css ⽂件，我们来美化下我们的组件，代码如下：
.confirm-wrapper {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0;
visibility: hidden;
transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
z-index: 1;
}
.confirm-visible {
opacity: 1;
visibility: visible;
transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.confirm-container {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);
border-radius: 0.2em;
min-width: 300px;
}
.confirm-title-container {
font-size: 1.3em;
padding: 10px;
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
}
.confirm-content-container {
padding: 0px 10px 15px 10px;
}
.confirm-buttons-container {
padding: 5px 15px 10px 15px;
text-align: right;
}
.confirm-buttons-container button {
margin-left: 10px;
min-width: 80px;
line-height: 20px;
border-style: solid;
border-radius: 0.2em;
padding: 3px 6px;
cursor: pointer;
}
.confirm-cancel {
background-color: #fff;
border-color: #848e97;
}
.confirm-cancel:hover {
border-color: #6c757d;
}
.confirm-ok {
background-color: #848e97;
border-color: #848e97;
color: #fff;
}
.confirm-ok:hover {
background-color: #6c757d;
border-color: #6c757d;
}
然后在 Confirm.tsx 中引⼊ Confirm.css ：
import"./Confirm.css";
6、启动应⽤
我们通过 npm start 启动我们的应⽤程序，效果如下：
JSX
JSX有点像HTML，允许我们在JavaScript代码(或TS3)中⽤类似HTML⼀样的语法结构进⾏书写。
JSX是⼀个看起来很像XML的JavaScript语法扩展。接下来我们来了解下在解释器的编译下最终会转换成什么。
1、使⽤ babeljs 在线⼯具
babeljs⽹址⼊⼝：点击这⾥
使⽤这款在线⼯具，我们将类似 HTML 的 JSX 内容转换成 JavaScript 的语法结构，⽰例如下：
This is where our title should go
"span",
null,
"This is where our title should go"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。