前端开发框架目前比较常用的就是react、vue等,其中使用React Hooks 带来了不少的好处,今天来聊聊React Hooks开发方式下,子组件和父组件的交互。
父组件调用子组件
子组件定义
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;
父组件调用子组件
import React, { useCallback, useState } from "react";
import Sub from "./sub";
const Parent = () => {
const [btnText, setBtnText] = useState("测试");
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("测试");
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;
实际效果:点击子组件中“改变父组件按钮”,父组件中按钮的文案从“测试”变成了“改变按钮文案“,同时在Console中输出”改变父组件按钮“,成功在子组件中刷新了父组件按钮文案。
这就是使用React Hooks开发方式下,子组件和父组件的交互,非常简单易懂,React Hooks确实是很好用呢,大大方便了前端开发。