React论坛 今日: 0|主題: 520|排名: 77 

Prompt 文档 Prompt 示例 使用场景：在离开页面之前，需要判断当前编辑的内容是否已经保存，如果没保存，则弹出提示框，提示用户保存。 查看 API 文档 【总结】：Prompt 有两个属性：message-当用户离开页面时给出的提示信息，when-是否渲染，设置为 true 时，离开页面时总会渲染，设置为 false 时，离开页面时不 ...

前言 　　这里写一下如何封装可复用组件。首先技术栈 react hooks + prop-types + jsx封装纯函数组件。类组件和typeScript在这不做讨论，大家别白跑一趟。        接下来会说一下封装可复用组件的思路，比如一个新手应该怎么去封装，都需要注意哪些东西。 　　然后说一些复杂组件需要的功能，比如闭合 ...

    参考npm文档：https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步：npm安装echarts-for-react npm install --save echarts-for-react npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts' 第二 ...

   React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScript库，即使React的主要作用是构建UI，但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案。         ...

1、父组件传值子组件 React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图： 在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。 父组件向子组件传值，通过props，将父组件的state传递给了子组件。 父组件代码片段： constructor(props){ super(pr ...

一、React中key值得作用 react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这 ...

前言 前阵子在自己学习React，最开始上手使用的creat-react-app来创建自己的项目，2版本之后的create-react-app已经支持了很多功能，比如sass、数据mock、typescript支持等等，也升级了相关依赖babel、webpack到一个最新的版本，具体可以参照Create React App 中文文档，但是它将项目的webpack配置等内容给藏起来了，想要 ...

前言 因为项目需要，需要一个可编辑的表格，但是Antd中提供的可编辑表格实在是太繁琐，使用起来实在是太不友好了，所以自己就写了一个简易的编辑表格组件。 第一步 首先，在项目中创建一个EditTable.tsx的文件;在文件中引入需要的模块； PS:本人使用的React Hook + TypeScript来进行开发的； import React, { useState, ...

为了获得更好的阅读体验，请访问原地址：传送门 一、React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目，因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意，所以索性就自己写了一套，用来架设 Instagram。做出来之后，发现这套东西还蛮好用的，于是就在 2013 年 5 月开源了。 在这里 ...

话不多说，先上代码： import React from 'react'; // 第一行 export const TextContext = React.createContext(); const Wrapper = () => { return ( // 第二行 <TextContext.Provider value={React.useState(‘Hello World.’)}> <ComponentA /> <ComponentB /> </TextContext.Provider> ...

当我们使用React 18 版本构建项目时，通常我们运行项目的时候会在控制台看到这样的报错信息 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-t ...

   react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。   情况1：后端返回一个完整的网页，前端直接 `<iframe src="$url"></iframe>` 就可以了。 情况2：后端返回内容不可控 (比如以下例子)。   用法： index.tsx: export default function Iframe () { const conten ...

环境搭建 我们当然可以先用脚手架搭建React项目，然后手动配置成支持TypeScript的环境，虽然比较麻烦，但可以让你更清楚整个过程。这里比较麻烦，就不演示了，直接用命令配置好。 npx create-react-app appname --typescript 可以安装一些自己需要的库及其声明文件，例如react-router-dom、axios、ant Design等。如果要安 ...

干货，无话   1、react-create-app，创建新react项目； 2、npm install react-amap，引入高德地图的封装； 3、编写组件index.js： import React from "react"; import ReactDOM from "react-dom"; import Map from "./Map3"; let mapData = { city: "北京", mapCenter:[116.418261, 39.921984], //城市定位 ...

react，前端三大框架之一，也是非常受开发者追捧的一门技术。而 typescript 是 javascript 的超集，主要特点是对 类型 的检查。二者的结合必然是趋势，不，已经是趋势了。react 文档、typescript 文档都看过，例子也敲过了，对此也都有了一定的理解，但是把二者很好的结合在一起，还是遇到了一些问题。纯粹记录一些，当然 ...

前言：不同分辨率的大屏适配这个是每个前端都会遇见的问题，以前也尝试过多种方案，今天就来分享一下我尝试过的方案跟我比较推荐的方案。 一、常见的大屏适配方案 1. 固定宽高 + scale 整体缩放 核心思想：把设计稿当作“画布”，用 CSS transform: scale() 对整张画布缩放，保证视觉一致性。 原理：根据屏幕尺寸与设计稿尺 ...

swagger外部文档 apiVersion: backstage.io/v1alpha1 kind: API metadata: name: petstore description: The Petstore API spec: type: openapi lifecycle: production owner: petstore@example.com definition: $text: https://petstore.swagger.io/v2/swagger.json 嵌入openapi文档 apiVersion: backsta ...

应该如何创建自己公司的backstage平台 1. 两种方式的本质区别 特性 npx @backstage/create-app 从 GitHub 下载源代码 产出物 一个完整的、可立即运行和开发的 Backstage 应用。 Backstage 项目框架本身的源代码，不是你应用的代码。 目的 创建你自己的、个性化的 Backstage 开发者门户。 这是官方推荐的、标准的启 ...

大家好，我是 Java陈序员。 在日常工作中，常常需要记录工作上的事项、学习笔记、突然的灵感等。但市面上多数笔记工具，要么是云端存储，要么功能臃肿，有的不适配技术笔记的排版需求，而且大部分无法自定义，满足不了个性化使用场景。 今天，给大家介绍一款开源的个人卡片式笔记工具，不仅支持私有化部署，而且集成 AI 功 ...

聊React之前，先说个事实：它不是最年轻的框架，也不是概念最创新的那个。但它赢了。 赢在生态，赢在社区，赢在"一旦用顺了就很难换"的惯性。本文不吹不黑，客观聊聊React的核心逻辑、实际现状，以及值不值得继续押注。 一、核心概念：理解React的设计哲学 Virtual DOM：快是表象，稳才是本质 Virtual DOM（虚拟DOM）被谈烂 ...