React 问题总结
1.React报错:The tag is unrecognized in this browser.If you meant to render a React component
import React from 'react';
import ReactDOM from 'react-dom';
import hello from './hello';
ReactDOM.render(<hello/>,document.getElementById('root')
);
原因:此浏览器无法识别标记。如果要呈现react组件,请以大写字母开头。
解决:将组件改成大写的,<Hello/>
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './hello';
ReactDOM.render(<Hello/>,document.getElementById('root')
);
2.写一个添加/删除列表功能
受控组件形式:
- 列表展示:
使用map((item,index)=><li></li>)
- 添加
onChange={this.add.bind(this)}
- 删除
onClick={this.delect.bind(this)}
代码段 小部件
非受控组件形式:
import React from 'react'class hello2 extends React.Component{constructor(props){super(props);this.state={todolist:['你好','他好','她好'],}}add(event){alert(this.textInput.value) this.setState({todolist:[...this.state.todolist,this.textInput.value]})event.prevenntDefault()}render() {const{todolist}=this.statereturn (<div><form onSubmit={this.add.bind(this)}><p>评论列表:</p><ul>{todolist.map((item,index ) => <p key={index} > {item}</p>)}</ul><input type="text" placeholder="添加评论" ref={(textInput)=>{this.textInput=textInput}}></input><button type="submit">添加</button></form></div>)}
}
export default hello2
区别:
受控组件:其值由React控制的输入表单元素称为“受控组件”。
受控组件有两个特点:1. 设置value值,value由state控制,2. value值一般在onChange事件中通过setState进行修改
非受控组件:表单数据由 DOM 处理的组件非受控组件。
非受控组件有两个特点:1. 不设置value值,2. 通过ref获取dom节点然后再取value值
能不用 ref
就不用。特别是要避免用 ref
来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”,不利于我们理解和维护。
3.事件绑定
https://www.jianshu.com/p/f391d8da2ef2
由于class 的方法默认不会绑定this,如果你忘记绑定 this,当你调用这个方法的时候 this的值为 undefined。通常情况下如果不是直接调用,应该为方法绑定this。绑定方式有如下几种:
- 方式一:
- add(){ }
<button type="reset" onClick={this.add.bind(this)}>添加</button>
- 方式二:
在constructor()加:this.add= this.add.bind(this);
add(){ }
<button type="reset" onClick={this.add}>添加</button>
- 方式三:使用箭头函数
- add(){ }
<button type="reset" onClick={()=>{this.add()}}>添加</button>
- 方式四:
- add=()=>{ }
<button type="reset" onClick={this.add}>添加</button>
4.组件之间的通讯
- 父发送,子接收
父组件: <TodoItem content={item} key={index}></TodoItem>通过content,进行传参
import React from 'react'
import TodoItem from './todoItem'class hello extends React.Component{constructor(){super();this.state={value:'',todolist:['你好','他好','她好'],number:0}this.change=this.change.bind(this);}add(){let value=this.state.value;this.setState({todolist:[...this.state.todolist,value],value:'' })}change(event){this.setState({ value:event.target.value});}render() {const{todolist,value}=this.statereturn (<div><p>评论列表:</p><ul>{todolist.map((item,index ) => <TodoItem content={item} key={index}></TodoItem>)}</ul><input type="text" placeholder="添加评论" value={value} onChange={this.change}></input><button type="reset" onClick={this.add.bind(this)}>添加</button></div>)}
}
export default hello
子组件:通过this.pros.content接收参数
import React from 'react'class todeItem extends React.Component{constructor(){super();}render(){return(<div>{ this.props.content} </div>)}
}
export default todeItem
- 子发送,父接收
父组件:获取子组件的参数值,需要先给子组件传递一个方法,该方法为需要参数的方法del={this.delect.bind(this)}
import React from 'react'
import TodoItem from './todoItem'class hello extends React.Component{constructor(){super();this.state={value:'',todolist:['你好','他好','她好'],number:0}this.change=this.change.bind(this);}add(){let value=this.state.value;this.setState({todolist:[...this.state.todolist,value],value:'' })}change(event){this.setState({ value:event.target.value});}delect(index){let todolist=[...this.state.todolist];todolist.splice(index,1);this.setState({todolist })}render() {const{todolist,value}=this.statereturn (<div><p>评论列表:</p><ul>{todolist.map((item,index ) => <TodoItem del={this.delect.bind(this)} content={item} key={index} index={index}></TodoItem>)}</ul><input type="text" placeholder="添加评论" value={value} onChange={this.change}></input><button type="reset" onClick={this.add.bind(this)}>添加</button></div>)}
}
export default hello
子组件:通过调用父组件传递过来的方法,给父组件相应的方法进行传值 this.props.del(this.props.index);
import React from 'react'class todeItem extends React.Component{del(){this.props.del(this.props.index);}render(){return(<div onClick={this.del.bind(this)}>{this.props.content} -----删除</div>)}
}
export default todeItem
5.axios
axios.get('/redPacket/list', { params: { miliao: searchParams.miliao, current: searchParams.current, pageSize: searchParams.pageSize } }).then((data) => {console.log(data)data && data.data && data.data.data && data.data.data.list &&this.setState({data: data.data.data.list,total: data.data.data.total})})
6.Object.assign()
Object.assign(target, source)用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
当表单提交时,需要传递参数,可以使用
this.setState(Object.assign(searchParams, { pageSize: pageSize, current: page }), () => {this.getData()})
7.箭头函数
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }// 没有参数的函数应该写成一对圆括号。
() => { statements }
8.前端table居中问题
style: { textAlign: "center" }
9.权限问题
if (!hasFun('mcp:redPacket:view')) {
return <h2>您没有权限查看此页面</h2>
}
9.map和forEach
- map
render (text,index) {const time = (text || '').split(' ')const elements = time.map((item, index) =><div key={index}>{item}</div>)return (<div>{elements}</div>)}
forEach
render (text,index) {const time = (text || '').split(' ')const elements = []time.forEach((item, index) => {elements.push(<div key={index}>{item}</div>)})return (<div>{elements}</div>)
}
React 问题总结相关推荐
- react非常适合入门者学习使用的后台管理框架
项目简介 该项目提供一个非常简洁的后台管理ui界面,非常适合初学者学习使用.项目结构: 项目地址:GitHub项目地址 技术栈 - react - antd - react-router-dom - ...
- 在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'
- 在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法 首先引入 import { useHistory } from ' ...
- 在react hook里使用mobx(配置mobx依赖)
在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的) npm i mobx mobx-react --save save是下载到"de ...
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
- react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
- React Native之ViewPagerAndroid跳转页面问题
前言: 网上目前react-native的教程较少,加上许多帖子还是用的ES5(2015年6月已发布ES6标准),有些细节很难找到答案,这里把遇到的问题做一个分享,让学习者尽量少踩坑. 出现问题: 1 ...
- http状态404 vscode_VS Code 调试完全攻略(5):基于浏览器的 React 应用
每日前端夜话第344篇 翻译:疯狂的技术宅 作者:Charles Szilagyi 来源:charlesagile 正文共:1750 字 预计阅读时间:7 分钟 这次我们来研究怎样把调试器连接到用 C ...
- react 组件连动效果_react-redux应用之独立组件联动实例
准备工作 先导入必要的库资源 import React, { Component, PropTypes } from 'react' import ReactDOM from 'react-dom' ...
最新文章
- iOS进阶之页面性能优化
- SecureCRT 7 序列号
- 医院的“数据中心”,究竟应该怎么建?
- 转: ashx中使用Session
- java最新版怎么安装_Java JDK 最新版本安装与环境配置
- Java并发之线程池ThreadPoolExecutor源码分析学习
- BZOJ 4094 USACO 2013 Dec. Optimal Milking
- java spring 加载bean,Spring多种加载Bean方式解析
- 网络操作系统第224页作业
- neovim--ubuntu安装
- manjaro Linux下使用腾讯会议
- 经典相声——企业信息化新“五官争功”
- 韦东山第3期嵌入式Linux项目-视频监控-3-在LCD上显示摄像头图像
- 山东工商学院计算机2军训,第二课堂-山东工商学院计算机科学与技术学院
- 照片一寸改成二寸,并压缩体积KB的工具
- Iometer存储测试工具参数说明-5 存储规格选项
- 计算机中怎样算2的21次方,脑筋急转弯:2的31次方与3的21次方哪个大?天才知道!...
- android 自动跳转市场,js判断设备,跳转app应用、android市场或者AppStore
- August 2007
- Echarts 学习系列(3)-Echarts动态数据交互
热门文章
- 大数据的四个成功案例(来自IT经理网)
- Embedded Linux S3C2440 Profiling
- Acer S3 拆机换固态硬盘!【我的Acer S3小三,时尚时尚最时尚!】
- IDC:微软Windows将于2007年失去统治地位
- push to origin/dev was rejected
- Arcgis开发系列2 - 修改arcgis infowindow 放大和缩小的模板
- java 文件拷贝保留原来的属性_Java常用属性拷贝工具类使用总结
- TVS二极管和稳压二极管的区别
- android+后台自动更新+上架,Android增量自动更新
- left semi join 和 left join 区别