本篇文章主要讲述的是关于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状态量重置成功后再取值，肯定取到的是重置后的值。（想看更多就到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
74a397915334c58c3353e1d4d3c87ca7//列表每项跳转路径
this.props.params.employeeid;//详情页路由具体实现，react router 将路由的数据都通过 props传递给了页面组件，从而可以访问路由相关数据了。
10、遇到maximum call stack size exceeded栈溢出问题总结
案例一：语法逻辑错误
11、组件状态变量个数的控制：由已经定义的state经过运算得到的值不能再定义为state变量
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react遇到的问题的有哪些？react的问题总结的详细内容。