react渲染

react渲染html數據

<div className="courseIntroduceMain"  dangerouslySetInnerHTML = {{ __html:item.content}}></div>

react手動綁定this的幾種方式：

  1 在constructor中綁定
  constructor(props) {
          super(props);
          this.goBack = this.goBack.bind(this);
  }
  goBack(){
      this.props.history.goBack();
  }

  <span onClick={this.goBack}></span>

  2 調用時使用箭頭函數 (不推薦)
  <span onClick={ ()=>{ this.goBack() }}></span>

  3 在constructor中定義
   constructor(props) {
            super(props);
            goBack = (e)=>{
                this.props.history.goBack();
            }
    }
  <span onClick={this.goBack}></span>
 

推薦：下面這種寫法不需綁定就可獲得this

handleChange=(event)=>{
    console.log(this);//當前的組件
}

react渲染列表的方式：

通過map：

import React from 'react'
import {Link} from 'react-router-dom'

class MenuHeader extends React.Component {
    state={
        menuList:[{ID: 163, Name: "家居日用", ParentID: 0, Ord: 10,},
                  {ID: 386, Name: "母嬰兒童", ParentID: 0, Ord: 8, Pic: "/"},
                  {ID: 529, Name: "生活服務", ParentID: 0, Ord: 0, Pic: "/"},
                  {ID: 533, Name: "超級優博", ParentID: 0, Ord: 0, Pic: "/"},
                  {ID: 535, Name: "美妝個護", ParentID: 0, Ord: 0, Pic: "/"}
              ]
    }

    render() {
        return (
            <div id="MenuHeader">
                <ul>
                    {this.state.menuList.map( item => (
                            <li key={item.ID}>
                                <Link to="/goods" replace>
                                    <span>{item.Name}</span>
                                </Link>
                            </li>
                        )
                    )}
                </ul>
            </div>
        )
    }
}

export default MenuHeader

【注意：map下，離外層最近的元素必須有key，且key的值必須唯一；否則其他情況都會報錯。例如上面的，li就是離循環外層最近的，如果可以不在li上，而在link或span上，就會出現報錯】

通過push return

import React from 'react'
import {Link} from 'react-router-dom'

class MenuHeader extends React.Component {
    state={
        menuList:[{ID: 163, Name: "家居日用", ParentID: 0, Ord: 10,},
                  {ID: 386, Name: "母嬰兒童", ParentID: 0, Ord: 8, Pic: "/"},
                  {ID: 529, Name: "生活服務", ParentID: 0, Ord: 0, Pic: "/"},
                  {ID: 533, Name: "超級優博", ParentID: 0, Ord: 0, Pic: "/"},
                  {ID: 535, Name: "美妝個護", ParentID: 0, Ord: 0, Pic: "/"}
              ]
    }

    getMenuList= () => {
        var menuList = this.state.menuList;
        var html=[];
        for(var i = 0; i < menuList.length; i++) {
            html.push( <li key={i}>
                <a href="javascript:;">{menuList[i].Name}</a>
            </li>)
        }
        return html
    }
    render() {
        return (
            <div id="MenuHeader">
                <ul>
                    {this.getMenuList()}
                </ul>
            </div>
        )
    }
}

export default MenuHeader

【map 渲染不出來的幾種情況】

1 map語法寫錯，
正確的是  {dataObj.map((item,index)=>())}
記住裏面的都是 （）不是{}

2 對象爲null,報錯null或者length錯誤；
這種情況使用條件渲染處理：

import React from 'react'
import {Link} from 'react-router-dom'

class MenuHeader extends React.Component {
    state={
        menuList:[]
    }
   
    getMenuList=(menuList)=>{
        var html =[];
        var menuList=menuList;
   
        menuList.map((item,index)=>{
            html.push( <li key={item.ID}>
                <Link to="/goods" replace>
                    <span>{item.Name}</span>
                </Link>
            </li>)
        })
        return html
    }
    render() {
        return (
            <div id="MenuHeader">
                {!!this.state.menuList&&this.state.menuList.length>0?<ul>
                    {this.getMenuList(this.state.menuList)}
                </ul>:<p>暫無數據</p>}
            </div>
        )
    }
}

export default MenuHeader

【注意，上面的沒有循環的li也是要有key，否則會報錯：index.js:1446 Warning: Each child in a list should have a unique "key" prop.】