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

前端开发框架目前比较常用的就是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 (
    

      {btnText}
    
  );
};

export default Sub;

父组件调用子组件

import React, { useCallback, useState } from "react";
import Sub from "./sub";

const Parent = () => {
  const [btnText, setBtnText] = useState("测试");

  const changeBtnText = useCallback(() => {
    setBtnText("改变按钮文案");
  }, []);
  return (
    

      
    
  );
};

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 (
    

      {btnText}
      
    
  );
};

export default Parent;

子组件中刷新父组件按钮文案

import React from "react";

type Props = {
  changeBtnText: (value: string) => void;
};

const Sub = (props: Props) => {
  const { changeBtnText } = props;

  return (
    

       {
          console.log("改变父组件按钮");
          changeBtnText("改变按钮文案");
        }}
      >
        改变父组件按钮
      
    
  );
};

export default Sub;

实际效果：点击子组件中“改变父组件按钮”，父组件中按钮的文案从“测试”变成了“改变按钮文案“，同时在Console中输出”改变父组件按钮“，成功在子组件中刷新了父组件按钮文案。

这就是使用React Hooks开发方式下，子组件和父组件的交互，非常简单易懂，React Hooks确实是很好用呢，大大方便了前端开发。