react基础语法2：render函数渲染复杂数组，对象

先看代码

import React from 'react';
import ReactDOM from 'react-dom';

let data = [
    {name: "dandan"},
    {name: "fufu"}
]
ReactDOM.render(<div>{data}</div>, document.getElementById("root"))
// 页面报错
// Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.

这是因为在react中不能直接存放对象和函数数据类型（但是设置样式的style属性里面可以使用{{}}来放置对象），只能存放基本数据类型（布尔型什么都不显示，null, undefined也是jsx元素，为空，也什么都不显示）；数组可以放在{}里面，但是会自动转换为字符串进行展示，且不能在数组里存放对象类型的值，只能存放基础数据类型的值；{}里面也不支持循环和判断语句（如if,for,foeEach......），但是可以使用三元运算符。

所以在jsx里渲染数组元素一般基于数组的map方法完成迭，并且需要给创建的元素一个唯一的key值（一般使用遍历的index作为key值）

ReactDOM.render(<div>{
    data.map((item, index) => {
        return <li key={index}> {item.name} </li>
    })
}</div>, document.getElementById("root"))