在 React+Typescript 项目环境中创建并使用组件

上文 React+Typescript清理项目环境 我们将自己创建的项目环境 好好清理了一下

下面 我们来看组件的创建 组件化在这种数据响应式开发中肯定是非常重要的。

我们现在src下创建一个文件夹 叫 components

就用他专门来处理组件业务

然后 我们在下面创建一个 hello.tsx

注意 是tsx 别习惯性达成 jsx了

然后hello.tsx编写代码如下

typescript 复制代码
import * as React from "react";

export default class hello extends React.Component {
    public render() {
        return (
            <div>hello</div>
        )
    }
}

这里 我们给render函数通过public声明了个作用域 当然 这个其实不加也可以

然后 我们src下找到App.tsx 改写成这样

typescript 复制代码
import Hello from "./components/hello";

function App() {
  return (
    <div className="App">
        hello React Typescript
        <Hello/>
    </div>
  );
}

export default App;

这里 我们只是单纯引入一下组件hello

然后 在div中放入组件

我们运行项目

就可以看到 确实是没问题的 组件上去了

然后 这里我们constructor 也会发生一些小调整

首先 我们用public 修饰一下 constructor作用域 公共的

然后 参数 我们是要声明类型的 这里 因为我们并不知道props是个什么 直接上any

更多的语法呢 我们就以后再说了

整体组件的语法还是和之前一样的

相关推荐
带娃的IT创业者3 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost4 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11065 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白5 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学5 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽6 小时前
【初学】调试 MCP Server
前端·mcp
四月_h6 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate6 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................8 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_8 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员