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)=>())}
记住里面的都是 （）不是{}，如果想用{}则里面要带一个return,例：

 {
                    this.props.listData.options.data.map((item,index)=>(
                        <div key={index}>
                            <img src={item.img_url} alt=""/>
                        </div>
                    ))
                }

效果等同于下面： 

 {
                    this.props.listData.options.data.map((item,index)=>{
                        return (
                            <div key={index}>
                                <img src={item.img_url} alt=""/>
                            </div>
                        )
                    })
                }

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.】