在 React+Typescript 项目环境中创建并使用组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 React+Typescript 项目环境中创建并使用组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上文 React+Typescript清理项目环境我们将自己创建的项目环境好好清理了一下
下面我们来看组件的创建组件化在这种数据响应式开发中肯定是非常重要的。

我们现在src下创建一个文件夹叫 components
在 React+Typescript 项目环境中创建并使用组件,react.js,typescript,前端
就用他专门来处理组件业务

然后我们在下面创建一个 hello.tsx
注意是tsx 别习惯性达成 jsx了
然后hello.tsx编写代码如下

import * as React from "react";

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

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

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

import Hello from "./components/hello";

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

export default App;

这里我们只是单纯引入一下组件hello
然后在div中放入组件
我们运行项目
就可以看到确实是没问题的组件上去了
在 React+Typescript 项目环境中创建并使用组件,react.js,typescript,前端
然后这里我们constructor 也会发生一些小调整

首先我们用public 修饰一下 constructor作用域公共的
然后参数我们是要声明类型的这里因为我们并不知道props是个什么直接上any