前端开发笔记｜ React Hooks子组件和父组件交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端开发笔记｜ 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 (
    <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确实是很好用呢，大大方便了前端开发。文章来源地址https://www.toymoban.com/news/detail-505836.html

到了这里，关于前端开发笔记｜ React Hooks子组件和父组件交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！