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的时候，在a38b9639147d7df119d79413d2f5c9790d36329ec37a2cc24d42c7229b69747a元素上加入需要传递的参数，同时，在B组件的props属性中声明并初始化相同名称的属性this.props.isdisplay

        子组件B本身封装（暴露）了很多props属性，在父组件A调用B时，可以直接向相应的props属性传入数据。

    情景二：父组件A需要向孙子组件C传递参数，中间有子组件B存在，B调用了C组件

        A调用C的时候，需要传入属性isdisplay，此时需要在B组件的props属性中声明并初始化isdisplay属性，同时在B组件调用C组件2b82062a5cae4a6eda1e58c073366b665f6acab10c476fc264ba16ac4aa7415c时，在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

74a397915334c58c3353e1d4d3c87ca7//列表每项跳转路径
this.props.params.employeeId;//详情页路由具体实现，React Router 将路由的数据都通过 props传递给了页面组件，从而可以访问路由相关数据了。

10、遇到Maximum call stack size exceeded栈溢出问题总结

    案例一：语法逻辑错误

11、组件状态变量个数的控制：由已经定义的state经过运算得到的值不能再定义为state变量

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上是react遇到的问题的有哪些？react的问题总结的详细内容。更多信息请关注PHP中文网其他相关文章！