react遇到的问题的有哪些?react的问题总结
本篇文章主要讲述的是关于react的应用,还有一些问题的原因总结。现在让我们一起来看看这篇文章吧
react项目中的遇到的问题:
1、新建了一个子组件,插入到父组件中,子组件渲染出的结果为以子组件命名的XML标签,而不是子组件中render方法的return结果。
在正常情况下,子组件渲染出的结果为,子组件中render方法的return结果,即p标签。
问题原因:react组件的命名规则,首字母必须大写。
React的JSX语法使用大、小写的约定来区分本地组件的类和 HTML 标签。但注意两点:JSX语法中,HTML标签和组件标签的class和for属性必须使用className和htmlFor来做对应的属性。
2、react构建的应用,input元素和textarea元素的值如何取到,如何实时更新到元素的属性(value)中。
如果像HTML页面那样不做任何处理,去向这两个元素写入数据,然后通过$(input).val();或this.refs.input01.value;两种方法去读取(拿)数据,结果为空。
因为肉眼看到input元素和textarea元素已经键入内容,但是react中的元素属性(value)并没有实时更新,需要对input元素和textarea元素做特殊处理。如下:
<input value={this.state.email} onChange={this.emailChange.bind(this)} type="email" maxLength="20"/> emailChange(event){ this.setState({email: event.target.value}) }
在元素上需要绑定onChange事件,然后通过event.target.value方法获取到值,再更新组件状态state,组件状态改变,组件会重新渲染调用render方法,元素通过value={this.state.email}更新value属性,即可取到数据。
this.state.email || $(input).val() || this.refs.input.value,取数据没有区别,但是写入数据有区别:
写入不可见数据,可以用this.refs.input.value="sometext",或,$(input).val("sometext"),通过refs属性操作元素,不调用render方法,不重新渲染页面;
写入可见数据必须用react的状态属性state控制:
<input value={this.state.email}/> this.setState({email: event.target.value})
3、写好了一个页面,渲染出空页面,没有任何结果。
问题原因:组件中render方法返回值的编码规范,return关键字的同一行必须有代码,或者为左p,或者为左括号。(相关问题:有一次另一个问题报错,官网解释,rerun返回值不能为花括号{}包围的变量,编码规范为,最外层必须为XML标签,并且只能有一个,不能有兄弟XML标签)
4、父子组件传递参数
情景一:父组件A需要向子组件B传递参数
父组件调用子组件B的时候,在<b isdisplay={true}></b>元素上加入需要传递的参数,同时,在B组件的props属性中声明并初始化相同名称的属性this.props.isdisplay
子组件B本身封装(暴露)了很多props属性,在父组件A调用B时,可以直接向相应的props属性传入数据。
情景二:父组件A需要向孙子组件C传递参数,中间有子组件B存在,B调用了C组件
A调用C的时候,需要传入属性isdisplay,此时需要在B组件的props属性中声明并初始化isdisplay属性,同时在B组件调用C组件<C isdisplay={this.props.isdisplay}></C>时,在C组件的属性中传入isdisplay属性。
5、写好一个组件页面,浏览器没有渲染出任何结果,显示空白页面。
问题原因:react的render方法语法格式错误
render(){}方法中的return返回内容格式要求,和return同一行必须有内容,并且返回的标签元素最外层只能有一个元素,形如:
return ( <p>...</p> ) retuern <p> ... </p>
6、组件的setState方法,传入参数详解,什么时候需要用回调函数?
this.setStete({},()=>{});//组件状态量,回调函数
如下情况,由于setStete方法是异步执行,所以直接在setStete方法后取重置的state状态量,有可能取到的是重置之前的值,因此需要用到回调函数,保证了state状态量重置成功后再取值,肯定取到的是重置后的值。(想看更多就到PHP中文网React参考手册栏目中学习)
this.setState({ pageNum: this.state.pageNum + 1}); console.log(pageNum);//pageNum || pageNum + 1
改造如下:
this.setState({ pageNum: this.state.pageNum + 1 },()=>{ console.log( pageNum ); });
总结:回调函数存在的功能,异步方法执行成功后再执行回调函数内容,即“异步方法同步化”。
7、组件状态量的初始化两种方法:
ES6语法中,可以在constructor方法中初始化,如下:
constructor(super){ props(super); this.state({ name: "nickname", }); }
react原生语法如下:
getInitialState() { return { name: "nickname", };}
8、react组件的结构与数据和逻辑无关
选用react框架搭建的web应用,最高效的事情就是,组件可以一次封装,多次调用,也就是说开发的所有组件都是可复用高复用度组件。
因此,需要理清一个思路,数据与逻辑和组件结构无关,对于具体需求的页面,可以用多个组件拼装而成,每个组件没有具体的数据和逻辑,页面的数据和逻辑在所有组件布局成功之后再添加。
9、对于list页面的路由配置
场景:比如员工信息列表,每一项对应一个人的详情页面,详情页面的布局完全相同
这种情况下需要用到react-router的路由参数功能,在路由配置的时候,增加一条参数配置
path: 'employee'//列表页路由配置
path: 'detail/:employeeId'//详情页路由配置,path 属性中的 :employeeId就是该路由的参数params
<a href={this.contextPath + "/app/employee" + result.success.data.employeeId}>//列表每项跳转路径
this.props.params.employeeId;//详情页路由具体实现,React Router 将路由的数据都通过 props传递给了页面组件,从而可以访问路由相关数据了。
10、遇到Maximum call stack size exceeded栈溢出问题总结
案例一:语法逻辑错误
11、组件状态变量个数的控制:由已经定义的state经过运算得到的值不能再定义为state变量
本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是react遇到的问题的有哪些?react的问题总结的详细内容,更多请关注其它相关文章!
上一篇: python break什么意思
下一篇: 数组,对象的解构.常用的流程控制方法!