react基礎02--基礎函數&自定義函數元件&屬性
- 1 介紹
- 2 方法案例
- 2.1 使用函數
- 2.2 引用元件
- 2.3 props 屬性
- 2.4 自定義class元件
- 3 注意事項
- 4 說明
1 介紹
本文在 react基礎01–初次體驗 react 的基礎上繼續學習基礎函數、自定義函數元件、props屬性 和 自定義class 元件，并配合執行個體加以說明。
2 方法案例
2.1 使用函數
清理無用的檔案，隻保留 index.html 和 index.js
vim index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-wideth, initial-scale-1" />
<title>React App</title>
</head>
<body>
<div id="root">
</div>
<!-- <hr/> -->
</body>
</html> vim index.js
import React from 'react'; // 隻要js中引 入了Reat子產品，就可以直接寫HTML
import ReactDOM from 'react-dom';
function a(){
return <div> this is a function </div>
}
function b(str){
return <div>{str}</div>
}
ReactDOM.render(
<div>
<h1> 使用者登入 </h1>{a()}
<hr/>
賬号:<input/>
{b("this is b function")}
</div>
,document.getElementById('root')
); 結果:
2.2 引用元件
vim a.js
function a(){
return <div> this a's content</div>
}
export default a; vim b.js
import React from "react"
// 使用 JSX 就需要引用 react
function b(str){
return <div>{str}</div>
}
export default b; vim index.js
import React from 'react'; // 隻要js中引 入了Reat子產品，就可以直接寫HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'
ReactDOM.render(
<div>
<h1> 使用者登入 </h1> <A></A>
{/* a() */}
<hr/>
賬号:<input/>
{B("this is b's parameter")}
</div>
,document.getElementById('root')
); 結果：
注意： 此處如果通過元件的方式使用B, 那麼就無法正常傳參數。
2.3 props 屬性
引用元件的時候無法正常傳遞參數，是以可以在指定的元件中新增很多props，然後通過屬性的方式傳遞給該元件。
如下将 str 和 id 傳遞給 元件C。
vim c.js
import React from "react"
// 使用 JSX 就需要引用 react
function c(props){
return (
<div>
<h2>
{props.str}
</h2>
<h2>
c's id={props.id}
</h2>
</div>
)
}
export default c; vim index.js
import React from 'react'; // 隻要js中引 入了Reat子產品，就可以直接寫HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'
import C from './c'
ReactDOM.render(
<div>
<h1> 使用者登入 </h1> <A></A>
{/* a() */}
<hr/>
賬号:<input/>
{B("this is b's parameter")}
<hr/>
<C str="this is c's parameter" id='c01'> </C>
</div>
,document.getElementById('root')
); 結果：
2.4 自定義class元件
使用元件的時候，既可以傳值|字元串，又可以傳表達式，還可以傳遞方法；
vim d.js
import React from "react"
// 把類當做函數的一個集合
class d extends React.Component{
constructor(props){ // 建立D元件時候必須要執行的方法，構造方法
super();
console.log('id='+props.id)
}
render(){
return (
<div>
<h1>this is d.render</h1>
{this.props.id}, {/*此處需要使用this，否則無法确定是哪個執行個體傳遞過來的，導緻報錯*/}
{this.props.class},
{this.header()}
{this.content()}
{this.footer()}
</div>
)
}
header() {
return (
<h2>this header</h2>
)
}
content(){
return (
<h2>this content</h2>
)
}
footer(){
return (
<h2>this is fotter</h2>
)
}
}
export default d; vim index.js
import React from 'react'; // 隻要js中引 入了Reat子產品，就可以直接寫HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'
import C from './c'
import D from './d'
ReactDOM.render(
<div>
<h1> 使用者登入 </h1> <A></A>
<hr/>
賬号:<input/>
{B("this is b's parameter")}
<hr/>
<C str="this is c's parameter" id='c01'> </C>
<hr/>
<D id='1' class={3*3}></D>{/*執行個體化D元件*/}
<D id='2'></D>{/*執行個體化D元件*/}
</div>
,document.getElementById('root')
); 結果：
3 注意事項
- js 中 export 方法
1. export 唯一的項
export default a
使用方法：
import A from './a'
2. export 多個項
export {
a,
i
}
使用方法：
import {A,i} from './a' - 元件中自定義的id 和 class 等字段和html 中的字段已經不是同一個性質了，是使用者在元件中新加的字段