react
漂移的电子
哎呀呀
展开
-
React redux 修改数据 store.dispatch(action)
一、获取数据store.getState()二、修改数据 store.dispatch(action)src/store/index.jsimport { createStore } from 'redux' // 引入方法import reducer from './reducer' const store = createStore(reducer) // 创建数据存储仓库export default store src/store/reducer.jsconst de原创 2021-08-03 17:40:01 · 4318 阅读 · 0 评论 -
React redux 获取数据store.getState()
一、获取数据store.getState()src/store/index.jsimport { createStore } from 'redux' // 引入方法import reducer from './reducer' const store = createStore(reducer) // 创建数据存储仓库export default store src/store/reducer.jsconst defaultState = { inputValue原创 2021-08-03 15:49:46 · 6241 阅读 · 0 评论 -
react中 Router管理,router&&NavLink使用
react-router提供了一些router的核心api,例如:Router,Route,Switch等,但是它没有提供dom操作进行跳转的api。React-router-dom提供了BrowserRouter,Route,Link等api,动态的,可以去使用dom的事件去控制路由import {HashRouter, NavLink, Route, BrowserRouter as Router} from 'react-router-dom'...原创 2021-07-16 13:56:18 · 273 阅读 · 0 评论 -
解决 Ant Design汉化问题
引入汉化插件,并ConfigProvider 包裹组件//index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import reportWebVitals from './reportWebVitals';import Home from './views/home';//引入插件import 'antd/dist/antd.css';import { ConfigP原创 2021-07-07 14:32:14 · 481 阅读 · 0 评论 -
react几种点击事件
方法一、最常用<button onClick={function(){ alert(111)}}>点击1</button>方法二、 返回一个函数,事件对象在返回的函数中click2 = (a,b)=>{ return (e)=>{ console.log(e); console.log(a,b); //333 "aaa" }}<button onClick={this.click2(333,'aaa')}>点击2&l原创 2021-06-09 17:10:27 · 2439 阅读 · 0 评论 -
Something is already running on port 3000.
报错 Something is already running on port 3000.出现原因:在执行命令 npx create-react-app my-app 时,我突然想换个项目名称,强行退出。再次输入 npx create-react-app demo之后依次执行cd my-appnpm start便出现 Something is already running on port 3000.其实是my-app也被同时构建了,怎么办呢?尝试很多办法都没用PORT=300原创 2020-09-01 10:30:40 · 1265 阅读 · 0 评论 -
react与框架Material-UI
1、Material-UI官方文档:https://material-ui.com/zh/getting-started/installation/安装:// 用npm安装npm install @material-ui/core// 用yarn安装yarn add @material-ui/core引用Material-UI 组件是独立工作的。 它们并不依赖任何全局的样式表,可单独引用。import React from 'react';import Button from '原创 2020-07-02 17:28:42 · 303 阅读 · 0 评论 -
react 搭建本地开发环境
1、确保你安装了较新版本的 Node.js。2、安装npx create-react-app my-app3、运行下面命令,浏览器自动打开访问 http://localhost:3000,即安装成功。cd my-appnpm start 开始写一个简单页面吧!1、删除掉新项目中 src/ 文件夹 “里面” 的所有文件。2、在 src/ 文件夹中创建一个名为 index.css 的文件。3、在 src/ 文件夹下创建一个名为 index.js 的文件,例子如下。import Rea原创 2020-07-02 11:26:20 · 931 阅读 · 0 评论 -
react类名、id 、style等属性绑定,for循环输出html, map/forEach数组遍历 &&对象遍历
class 用className绑定:<p className="title">春夏秋冬</p>行内样式绑定:<p style={{"color":"blue"}}>春光满面</p>id属性绑定不变:<p id="demo1">四季如春</p>for循环输出html:import React from 'react';import ReactDOM from 'react-dom';import './index原创 2020-05-21 16:46:01 · 3205 阅读 · 0 评论 -
Parsing error: Unterminated JSX contents
经过一番检查发现了这样一个错误:<p>标题<p/>原创 2020-05-21 16:27:52 · 2867 阅读 · 1 评论 -
React 函数组件与 class 组件区别及使用
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。函数组件:import React from 'react'function Nav (props) { return ( <div> <h3>{props.title}</h3> &...原创 2020-04-12 17:22:06 · 1887 阅读 · 0 评论 -
react:props属性&&state状态介绍及使用
Props 的只读性组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。//src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './app'ReactDOM.render( < App / > , document.ge...原创 2020-04-12 15:08:48 · 201 阅读 · 0 评论 -
React组件的渲染和引入及嵌套
创建Home组件import React from 'react'//直接导出export default class Home extends React.Component { render () { return ( <div>Is is Home</div> ) }}Home组件引入到APP组件中import Re...原创 2020-04-12 13:56:51 · 430 阅读 · 0 评论 -
react渲染元素
想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render():例1、const element = <h1>Hello, world</h1>;ReactDOM.render(element, document.getElementById('root'));例2、 ReactDOM.render( < h1...原创 2020-04-11 21:19:19 · 79 阅读 · 0 评论