【React】入门第三天 - 数组和对象

React

---

关于React学习内容我已经上传到github上了，如果需要的话自行下载Github

react 数组

---

map()循环

react数组渲常用map()镜像数据渲染

<script type="text/babel">
    var arr = ["react", "vue", "java", "golang"];

    let dom = (<div>
        {
            arr.map((item, index) => {
                return <p>{index} -- {item}</p>
            })
        }

    </div>)
    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

在console中会提示错误，如果想在react中完成列表渲染的话，每一个子节点需要一个唯一的key值，这个key值是在我们新增和修改的时候让react知道是谁在变化，让页面dom进行更加高效的操作。

加上key

return (<p key = {index}> {index} -- {item}</p>)

for in循环

使用for in循环

// for in 循环
function forInArray(params) {
    var domArr = []
    for(let index in arr){
        domArr.push( <p key = {index}> { arr[index] } </p> )
    }
    return domArr;
}

let dom = ( <div>{
        forInArray({arr})
}</div> )

对象

---

遍历对象的 key和value

<script type="text/babel">
    let user = {
        name: "laoshiren",
        course: "react",
        tools: "vscode"
    }

    function objectKeys (params) {
        var keysArr = []
        // 对象的键值遍历，当对象是个变量的时候，不能用object.key的方式 只能用object[key]
        // Object.keys()返回一个对象的key的数组当然还有Object.values()
        Object.keys(params)
                .map( (keyName,i)=> {
                    keysArr.push( <div key = {i}>
                        <span>对象的keyName是 </span> { keyName } 
                        <div></div>
                        <span>对象的value是 </span> {params[keyName]}
                        <p></p>
                    </div> )
                } )
        return keysArr
    }

    let dom = ( <div>{
        objectKeys(user)
    }</div> )

    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>