react项目渲染页面

列表渲染

1，将元素放到数组中直接渲染

class Book extends React.Component{
    render(){
        return (
            <div>
                {[
                    <h3>射雕英雄传</h3>,
                    <h3>神雕侠侣</h3>,
                    <h3>倚天屠龙记</h3>
                ]}
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

2,将数组在外部定义然后渲染

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        // 定义数组，将元素放到该数组中
        var siteElements=[];
        bookArr.forEach((item)=>{
            siteElements.push(
                <div>
                    <p>网站：{item.siteName}</p>
                    <p>网站：{item.siteUrl}</p>
                    <hr/>
                </div>
            )
        })
        return (
            <div>
                {siteElements}
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

3,使用map对数据进行渲染

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        return (
            <div>
                {
                    bookArr.map((item)=>{
                        return(
                            <div>
                                <p>网站：{item.siteName}</p>
                                <p>网站：{item.siteUrl}</p>
                                <hr/>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

image.png

报错啦，怎么办？对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。所以需要给数组每一个元素增加一个唯一的标识。
一般可以将后台返回的ID作为key值，因为后台返回的ID都是唯一的。
所以需要将代码进行如下的调整，为其添加一个key。

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        return (
            <div>
                {
                    bookArr.map((item,index)=>{
                        return(
                            <div key={index}>
                                <p>网站：{item.siteName}</p>
                                <p>网站：{item.siteUrl}</p>
                                <hr/>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

完美解决了

react组件

class Homebutton extends Component {
    render() {
       return (
           <button>
                <Link to={{ pathname: '/comments', search: ''}} className="home-link">评论</Link> 
           </button>
           <button>
                <Link to={{ pathname: '/todolist', search: ''}} className="home-link">todolist</Link> 
           </button>      
       );
    }
 }

image.png
页面报错了

class Homebutton extends Component {
    render() {
       return (
           <div>
                <button>
                   <Link to={{ pathname: '/comments', search: ''}} className="home-link">评论</Link> 
                </button>
                <button>
                   <Link to={{ pathname: '/todolist', search: ''}} className="home-link">todolist</Link> 
                </button>
           </div>         
       );
    }
 }

在return()最外层加上一个<div>元素包裹其它节点以避免此类错误