首頁 >web前端 >js教程 >react遇到的問題的有哪些? react的問題總結

react遇到的問題的有哪些? react的問題總結

寻∝梦
寻∝梦原創
2018-09-11 14:49:402518瀏覽

本篇文章主要講述的是關於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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn