(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
目錄
受控表單綁定?
React中獲取DOM
組件通信
父?jìng)髯?
父?jìng)髯?基礎(chǔ)實(shí)現(xiàn)
父?jìng)髯?props說(shuō)明
父?jìng)髯?- 特殊的prop children
子傳父?
使用狀態(tài)提升實(shí)現(xiàn)兄弟組件通信
使用Context機(jī)制跨層級(jí)組件通信
受控表單綁定?
概念：使用React組件的狀態(tài)（useState）控制表單的狀態(tài)
1. 準(zhǔn)備一個(gè)React狀態(tài)值
2. 通過(guò)value屬性綁定狀態(tài)，通過(guò)onChange屬性綁定狀態(tài)同步的函數(shù)
//受控綁定表單
import { useState } from "react"
function App() {
const[value ,setValue]=useState('')
return (
<div>
<input
value={value}
onChange={(e)=>setValue(e.target.value)}
type="text"/>
</div>
);
}
export default App;React中獲取DOM
在 React 組件中獲取/操作 DOM，需要使用 useRef React Hook鉤子函數(shù) ，分為兩步：1. 使用useRef創(chuàng)建 ref 對(duì)象，并與 JSX 綁定
2. 在DOM可用時(shí)，通過(guò) inputRef. current 拿到 DOM 對(duì)象
2
//React獲取DOM
import { useRef } from "react"
function App() {
const inputRef = useRef(null)
const showDom=()=>{
console.log(inputRef.current)
}
return (
<div>
<input type="text" ref={inputRef}/>
<button onClick={showDom}>獲取dom</button>
</div>
);
}
export default App;組件通信
概念：組件通信就是 組件之間的數(shù)據(jù)傳遞， 根據(jù)組件嵌套關(guān)系的不同，有不同的通信方法4
父?jìng)髯?
父?jìng)髯?基礎(chǔ)實(shí)現(xiàn)
實(shí)現(xiàn)步驟1. 父組件傳遞數(shù)據(jù) - 在子組件標(biāo)簽上 綁定屬性2. 子組件接收數(shù)據(jù) - 子組件通過(guò) props參數(shù) 接收數(shù)據(jù)?
//父?jìng)髯?function Son(props) {
return <div>this is son,{props.name}</div>
}
function App() {
const name = 'this is app name'
return (
<div>
<Son name={name} />
</div>
);
}
export default App;
網(wǎng)頁(yè)顯示為：
父?jìng)髯?props說(shuō)明
1. props可傳遞任意的數(shù)據(jù)數(shù)字、字符串、布爾值、數(shù)組、對(duì)象、函數(shù)、JSX
2. props是只讀對(duì)象子組件 只能讀取props中的數(shù)據(jù) ，不能直接進(jìn)行修改, 父組件的數(shù)據(jù)只能由父組件修改
父?jìng)髯?- 特殊的prop children
場(chǎng)景：當(dāng)我們把內(nèi)容嵌套在子組件標(biāo)簽中時(shí)，父組件會(huì)自動(dòng)在名為children的prop屬性中接收該內(nèi)容
子傳父?
核心思路：在子組件中調(diào)用父組件中的函數(shù)并傳遞參數(shù)
function Son({onGetSonMsg}) {
const sonMsg="this is son msg"
return (
<div>
this is Son
<button onClick={()=>onGetSonMsg(sonMsg)}>sendMsg </button>
</div>
)
}
function App() {
const getMsg=(msg)=>{
console.log(msg)
}
return (
<div>
this is APP
<Son onGetSonMsg={getMsg} />
</div>
);
}
export default App;
使用狀態(tài)提升實(shí)現(xiàn)兄弟組件通信
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-791094.html
實(shí)現(xiàn)思路：借助“狀態(tài)提升”機(jī)制，通過(guò)父組件進(jìn)行兄弟組件之間的數(shù)據(jù)傳遞1. A組件先通過(guò)子傳父的方式把數(shù)據(jù)傳給父組件App2. App拿到數(shù)據(jù)后通過(guò)父?jìng)髯拥姆绞皆賯鬟f給B組件
// 1. 通過(guò)子傳父 A -> App
// 2. 通過(guò)父?jìng)髯?App -> B
import { useState } from "react"
function A ({ onGetAName }) {
// Son組件中的數(shù)據(jù)
const name = 'this is A name'
return (
<div>
this is A compnent,
<button onClick={() => onGetAName(name)}>send</button>
</div>
)
}
function B ({ name }) {
return (
<div>
this is B compnent,
{name}
</div>
)
}
function App () {
const [name, setName] = useState('')
const getAName = (name) => {
console.log(name)
setName(name)
}
return (
<div>
this is App
<A onGetAName={getAName} />
<B name={name} />
</div>
)
}
export default App
使用Context機(jī)制跨層級(jí)組件通信
?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-791094.html
實(shí)現(xiàn)步驟：1. 使用createContext方法創(chuàng)建一個(gè)上下文對(duì)象Ctx2. 在頂層組件（App）中通過(guò) Ctx.Provider 組件 提供數(shù)據(jù)3. 在底層組件（B）中通過(guò) useContext 鉤子函數(shù)獲取消費(fèi)數(shù)據(jù)
// App -> A -> B
import { createContext, useContext } from "react"
// 1. createContext方法創(chuàng)建一個(gè)上下文對(duì)象
const MsgContext = createContext()
// 2. 在頂層組件 通過(guò)Provider組件提供數(shù)據(jù)
// 3. 在底層組件 通過(guò)useContext鉤子函數(shù)使用數(shù)據(jù)
function A () {
return (
<div>
this is A component
<B />
</div>
)
}
function B () {
const msg = useContext(MsgContext)
return (
<div>
this is B compnent,{msg}
</div>
)
}
function App () {
const msg = 'this is app msg'
return (
<div>
<MsgContext.Provider value={msg}>
this is App
<A />
</MsgContext.Provider>
</div>
)
}
export default App
到了這里，關(guān)于前端react入門(mén)day03-react獲取dom與組件通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
