【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>