上文 React+Typescript清理項目環(huán)境 我們將自己創(chuàng)建的項目環(huán)境 好好清理了一下
下面 我們來看組件的創(chuàng)建 組件化在這種數(shù)據(jù)響應(yīng)式開發(fā)中肯定是非常重要的。
我們現(xiàn)在src下創(chuàng)建一個文件夾 叫 components
就用他專門來處理組件業(yè)務(wù)
然后 我們在下面創(chuàng)建一個 hello.tsx
注意 是tsx 別習(xí)慣性達(dá)成 jsx了
然后hello.tsx編寫代碼如下
import * as React from "react";
export default class hello extends React.Component {
public render() {
return (
<div>hello</div>
)
}
}
這里 我們給render函數(shù)通過public聲明了個作用域 當(dāng)然 這個其實不加也可以
然后 我們src下找到App.tsx 改寫成這樣
import Hello from "./components/hello";
function App() {
return (
<div className="App">
hello React Typescript
<Hello/>
</div>
);
}
export default App;
這里 我們只是單純引入一下組件hello
然后 在div中放入組件
我們運(yùn)行項目
就可以看到 確實是沒問題的 組件上去了
然后 這里我們constructor 也會發(fā)生一些小調(diào)整
首先 我們用public 修飾一下 constructor作用域 公共的
然后 參數(shù) 我們是要聲明類型的 這里 因為我們并不知道props是個什么 直接上any文章來源:http://www.zghlxwxcb.cn/news/detail-650475.html
更多的語法呢 我們就以后再說了
整體組件的語法還是和之前一樣的文章來源地址http://www.zghlxwxcb.cn/news/detail-650475.html
到了這里,關(guān)于在 React+Typescript 項目環(huán)境中創(chuàng)建并使用組件的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!