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元件的props屬性中宣告並初始化相同名稱的屬性this.props.isdisplay############        子元件B本身封裝（揭露）了許多props屬性，在父元件A呼叫B時，可以直接向對應的props屬性傳入數據。 ############    情境二：###父元件A需要傳遞給孫子元件C參數，中間有子元件B存在，B呼叫了C元件#########

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

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

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

    案例一：语法逻辑错误

11、元件狀態變數數量的控制：由已經定義的state經過運算得到的值不能再定義為state變數

本篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react遇到的問題的有哪些？ react的問題總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！