前端开发笔记｜ React Hooks子组件和父组件交互

LTing5505

已于 2023-06-21 18:00:49 修改

阅读量762

点赞数

文章标签： react.js 笔记 javascript

于 2023-06-21 11:42:02 首次发布

本文链接：https://blog.csdn.net/u012958716/article/details/131323371

版权

文章通过一个实例展示了在React中使用Hooks进行开发时，如何实现子组件调用父组件的方法以及子组件改变父组件状态的功能。通过useState和useCallbackHook，子组件能够更新父组件中的按钮文案，体现了ReactHooks在组件通信中的简便性。

摘要由CSDN通过智能技术生成

前端开发框架目前比较常用的就是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确实是很好用呢，大大方便了前端开发。