qq_45429539的博客

安装npm install --save react-router-dom使用例子import React from "react";import { BrowserRouter as Router, Route, Link } from "react-router-dom";function Index() { return <h2>JSPang.com</h2>;}function List() { return <h2>List-Page

context直接上代码import React, { useState , createContext } from 'react';//===关键代码const CountContext = createContext()function Example4(){ const [ count , setCount ] = useState(0); return ( <div> <p>You clicked {co

useEffect使用：import React, { useState , useEffect } from 'react';function Example(){ const [ count , setCount ] = useState(0); //---关键代码---------start------- useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`)

useStateuseState是react自带的一个hook函数，它的作用是用来声明状态变量。声明方式：const [ count , setCount ] = useState(0);使用<div>{count}</div>改变值setCount(i) // 调用setCount方法参数是想要修改的值注意：就是React Hooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序。...

PropTypes示例代码；import PropTypes from 'prop-types';class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}Greeting.propTypes = { name: PropTypes.string};

列表&key列表&key渲染多个组件基础列表组件key用 key 提取组件key 只是在兄弟节点之间必须唯一在 JSX 中嵌入 map()列表&keyconst numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);渲染多个组件const numbers = [1, 2, 3, 4, 5];const listItems

事件处理React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。阻止默认行为在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。function ActionLink() { function handleClick(e) { e.preven

State & 生命周期state将函数组件转换成 class 组件向 class 组件中添加局部的 state将生命周期方法添加到 Class 中正确地使用 State不要直接修改 State使用 setState():State 的更新可能是异步的State 的更新会被合并数据是向下流动的stateState 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。将函数组件转换成 class 组件通过以下五步将函数组件转成 class 组件：1.创建一个同名的 ES

组件&props组件 & Props函数组件与 class 组件渲染组件组合组件提取组件Props 的只读性组件 & Props组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}class 组件

react 元素渲染元素是构成react应用的最小砖块const element = <h1>Hello, world</h1>;将一个元素渲染为 DOM想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：const element = <h1>Hello, world</h1>;ReactDOM.render(element, document.getElementById('root'

JSX简介JSX简介在 JSX 中嵌入表达式JSX 也是一个表达式JSX 特定属性使用 JSX 指定子元素JSX 防止注入攻击JSX 表示对象JSX简介const element = <h1>Hello, world!</h1>;这个有趣的标签语法既不是字符串也不是 HTML。它被称为 JSX，是一个 JavaScript 的语法扩展。在 JSX 中嵌入表达式function formatName(user) { return user.firstName + '

创建react项目时遇到的报错百度到的第一个方法：1.执行npm install -g create-react-app全局安装2.执行npx create-react-app myapp创建项目结果控制台打印：(node:18924) ExperimentalWarning: The fs.promises API is experimentalYou are running `create-react-app` 4.0.1, which is behind the latest relea