前端開(kāi)發(fā)框架目前比較常用的就是react、vue等，其中使用React Hooks 帶來(lái)了不少的好處，今天來(lái)聊聊React Hooks開(kāi)發(fā)方式下，子組件和父組件的交互。
父組件調(diào)用子組件
子組件定義
import React from "react";
type Props = {
btnText: string;
onClick: () => void;
};
const Sub = (props: Props) => {
const { btnText, onClick } = props;
return (
<div>
<button onClick={onClick}>{btnText}</button>
</div>
);
};
export default Sub;
父組件調(diào)用子組件
import React, { useCallback, useState } from "react";
import Sub from "./sub";
const Parent = () => {
? const [btnText, setBtnText] = useState("測(cè)試");
? const changeBtnText = useCallback(() => {
? ? setBtnText("改變按鈕文案");
? }, []);
? return (
? ? <div>
? ? ? <Sub btnText={btnText} onClick={changeBtnText} />
? ? </div>
? );
};
export default Parent;子組件改變父組件
父組件定義
import React, { useCallback, useState } from "react";
import Sub from "./sub";
const Parent = () => {
const [btnText, setBtnText] = useState("測(cè)試");
const changeBtnText = useCallback((value: string) => {
setBtnText(value);
}, []);
return (
<div>
<button>{btnText}</button>
<Sub changeBtnText={changeBtnText} />
</div>
);
};
export default Parent;
子組件中刷新父組件按鈕文案
import React from "react";
type Props = {
changeBtnText: (value: string) => void;
};
const Sub = (props: Props) => {
const { changeBtnText } = props;
return (
<div>
<button
onClick={() => {
console.log("改變父組件按鈕");
changeBtnText("改變按鈕文案");
}}
>
改變父組件按鈕
</button>
</div>
);
};
export default Sub;
實(shí)際效果：點(diǎn)擊子組件中“改變父組件按鈕”，父組件中按鈕的文案從“測(cè)試”變成了“改變按鈕文案“，同時(shí)在Console中輸出”改變父組件按鈕“，成功在子組件中刷新了父組件按鈕文案。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-505836.html
這就是使用React Hooks開(kāi)發(fā)方式下，子組件和父組件的交互，非常簡(jiǎn)單易懂，React Hooks確實(shí)是很好用呢，大大方便了前端開(kāi)發(fā)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505836.html
到了這里，關(guān)于前端開(kāi)發(fā)筆記 ｜ React Hooks子組件和父組件交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
