43 lines
652 B
Markdown
43 lines
652 B
Markdown
## 元素渲染
|
|
|
|
```
|
|
//导入react dom 渲染包
|
|
import { createRoot } from 'react-dom/client'
|
|
//创建根对象
|
|
const root = createRoot(DOM对象)
|
|
//渲染react 内容
|
|
root.render(React内容)
|
|
```
|
|
|
|
## 事件绑定
|
|
|
|
```
|
|
// on+事件名称= { 事件处理程序 }
|
|
<div onClick={() => {}} />
|
|
|
|
//事件对象
|
|
<a onClick={e => e.preventDefault()} href="..."></a>
|
|
```
|
|
|
|
## 组件状态
|
|
|
|
```
|
|
const [变量, 修改变量的函数] = useState(默认值)
|
|
```
|
|
|
|
## DOM操作
|
|
|
|
```
|
|
const inputRef = useRef(null) // 创建ref对象
|
|
<input ref={inputRef} /> // 与jsx绑定
|
|
|
|
inputRef.current.value // 使用dom中的值
|
|
```
|
|
|
|
## 组件传递数据props
|
|
|
|
```
|
|
|
|
```
|
|
|