如诗 学习笔记

React hooks子组件暴露方法示例

说明 通常情况下,React 子组件使用父组件的方法或值通过props传递,反过来,父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例: User.tsx import React, { FC, useEffect, useState, useRef } from 'reac

likepoems likepoems 发布于 2024-02-01

React将数据转化成树形结构

1、React将数据转化成树形结构 // 初始数据 let result = [ { parentId: null, id: 1, name: "书籍", count: 100 }, { parentId: 1, id: 2, name: "西游记", count: 50 }, { p

likepoems likepoems 发布于 2023-07-03

react antd 实现图片自定义预览

功能需求 有这样一个需求,用户点击文字或者按钮,会弹出图片的预览界面,要求图片可旋转,可缩放以及可下载。由于antd组件的Image的预览窗口不包含图片下载的功能,所以这里通过modal对img添加预览模块。 实现过程 代码如下: import React from 'react'; import

likepoems likepoems 发布于 2023-02-10

react antd select组件添加全选功能

1、需求 最近遇到一个需求,一张表格中需要有个下拉框,antd官网中有相应的Select组件,但是由于数据比较多,用户需要一个全选的需求。即点击全选下拉框数据全部选中,再次点击取消全选即选中的数据清空。然后数据一条一条点击完后全选框会被选中,反之不会被选中。 2、实现代码 import React

likepoems likepoems 发布于 2023-01-04

React 函数组件

React 函数组件 1、定义方式 React 函数组件是指使用函数方法定义的组件。 定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<></>(Fragment 标签)包裹起来,方法写在 return 前面。 const App = () =>

likepoems likepoems 发布于 2022-11-03

React 中的常用方法

React 中的常用方法 1、合并数组 // 合并数组并去重 mergeArray = (arr1, arr2) => { return Array.from(new Set([...arr1, ...arr2])); }; 2、合并数组对象 // 合并具有相同属性的对象 mergeObjec

likepoems likepoems 发布于 2022-10-24

react的组件通信

react的组件通信 1、父组件传子组件 import React, {Component} from 'react' class Father extends Component{ render() { return ( <div>

likepoems likepoems 发布于 2022-01-22