?1、類組件
import React from 'react';
class ClassApp extends React.Component {constructor(props) {super(props);this.state={};}render() {return (<div><h1>這是一個類組件</h1><p>接收父組件傳過來的值:{this.props.name}</p></div>);}
}
export default ClassApp;
2、函數組件
import React from 'react';
function FuncApp(props) {return (<div><h1>我是函數組件</h1><h2>接收父組件傳過來的值:{props.name}</h2></div>);
}
3、組件樣式控制
import './index.css';
function FuncApp(props) {return (<div><h1 style={{ color: 'red', fontSize: 25 }}>我是函數組件</h1><h2 className='info-box'>接收父組件傳過來的值:{props.name}</h2></div>);
}// index.css
.info-box {color: skyblue;font-size: 25px;
}
4、React表單組件
React中的表單組件大致可分為兩類:
- 受控組件:一般涉及到表單元素時我們才會使用這種分類方法。受控組件的值由props或state傳入,用戶在元素上交互或輸入內容會引起應用state的改變。在state改變之后重新渲染組件,我們才能在頁面中看到元素中值的變化,假如組件沒有綁定事件處理函數改變state,用戶的輸入是不會起到任何效果的,這也就是“受控”的含義所在。
- 非受控組件:類似于傳統的DOM表單控件,用戶輸入不會直接引起應用state的變化,我們也不會直接為非受控組件傳入值。想要獲取非受控組件,我們需要使用一個特殊的ref屬性,同樣也可以使用defaultValue屬性來為其指定一次性的默認值。
//受控組件
this.state = {value: "默認值"
}
change(event) {this.setState({value: event.target.value})
}
<div><input type="text" value={this.state.value} onChange={this.change.bind(this)} /><p> {this.state.value} </p>
</div>// hooks寫法
import { useState } from "react";
function App() {const [name, setName] = useState('')return (<div className="App"><input type="text" value={name} onChange={(e) => setName(e.target.value)} /></div>);
}
export default App;//非受控組件
<input type="text" defaultValue="hello!"/>
5、React獲取dom元素
????????在react中操作dom,可以使用useRef鉤子函數
(1)使用useRef創建ref對象,并于JSX綁定
import { useRef } from "react";
function App() {const inputRef = useRef(null)return (<div className="App"><input type="text" ref={inputRef} /><button onClick={showDom}>顯示dom</button></div>);
}
export default App;
(2)在DOM可用時,通過inputRef.current拿到DOM對象
const showDom = () => {console.log(inputRef.current);
}
6、props
(1)定義和使用props
????????react中的每一個組件,都包含有一個屬性(props),屬性主要是從父組件傳遞給子組件的?
// 父組件
function App() {const name = '張三'return (<div className="App"><Son name={name} /></div>);
}// 子組件
function Son(props) {return (<div>{ props.name }</div>)
}
(2)特殊的prop children(類似于Vue的插槽)
????????當我們把內容嵌套在子組件標簽中時,父組件會自動在名為children的prop屬性中接收該內容
// 父組件
function App() {const name = '張三'return (<div className="App"><Son name={name}><span>hello</span></Son></div>);
}// 子組件
function Son(props) {return (<div>{ props.children }--{ props.name}</div>)
}