qq_32615575的博客

import React, { Component } from 'react'import PropTypes from 'prop-types' // 没有提示直接导入，不需要安装export default class Sub extends Component { // 在class内部，通过static修饰的属性，就是静态属性 static defaultProps = { num: 888 } static propTypes = { .

使用React Developer Tools 4.0以上版本可在控制台看到组件选择然后获取到$r.props属性JSON.stringify($r.props, null, 2)

contentEditable=true 意为该dom元素可以被编辑在react中对元素使用contentEditable= true 会发出警告；可以使用suppressContentEditableWarning属性去除，列如<div suppressContentEditableWarning contentEditable="true" orignalnum={item.userNum}>{item.userNum}</div>...

// 子组件import React, {forwardRef,useImperativeHandle} from 'react';const FunctionComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ click: handleClick, ref: ref.current, })); const handleClick...

{ title: <div>描述&nbsp; <Tooltip placement='bottom' title={<div><span>是宇宙无敌小可爱！！！</span><br/><span>and!</span><br/><span>小聪明！！</span></div>}> <Inf...

npx umi g page demo umi生成页面demonpx umi g page class/index umi生成目录class页面index$xx.js umi2要求$开头代表动态路由[id]xx.js umi3要求[]开头代表动态路由

1、当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。例如，这段代码会在页面上渲染 “Hello, Sara”：function Welcome(props) { return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="Sara" />;Re.

挂载组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：4constructor() 构造函数static getDerivedStateFromProps() 属性得派生状态函数render() 渲染函数componentDidMount() 组件挂载完成函数更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：5static getDerivedStateFromProps() 属性得派生状态函数should...

安装Prettier - Code formatter插件然后配置右下角选择javascriptreact => 搜索下面选择 javascript react 语言基础设置 跳转到 => setting.json在setrings文件中配置如下代码，即可{"editor.defaultFormatter": "esbenp.prettier-vscode","[javascript]": {"editor.defaultFormatter": "esbenp.p..

React中css模块化注意第三方UI库CSS样式有可能被模块化第三方UI库一般样式都是以css结尾 可以约定使用scss或者less文件作为模块化处理，不对css文件进行模块化，这样就可以正常使用第三方UI webpack配置改为如下只针对scss文件module:{ rules:[ { test:/\.css/,use:['style-loader','css-loader'] }, { test:/\.scss/,use:['style-loa...

1、style-loader、css-loader前者动态生成style标签挂载样式 后者处理css文件依赖安装npm istyle-loadercss-loader -Dwebpack配置注意先后顺序，一定要写loadermodule:{ rules:[ { test:/\.css/,use:['style-loader','css-loader?modules&localIndexName=[path][name]-[local]-[has...

如何启用jsx语法1、安装babel插件npm i babel-core babel-loader babel-plugin-transform-runtime -Dnpm i babel-preset-env babel-preset-stage-0 -Dnpm i babel-preset-react -D2、添加配置文件.babelrc{ "presets":["env","stage-0","react"], //语法 "plugins":["transfo...

react中css模块化可通过配置webpack类似于vue中css作用域有scoped指令作用组件内起作用css-loader之后可通过？追加参数，类似地址栏url参数形式固定参数modules，表示普通css样式表，启用模块化module:{ rules:[ { test:/\.css/,use:['style-loader','css-loader?modules'] } ]}...