關於 React 小書:渲染陣列裡的各個項目


Posted by YongChenSu on 2020-12-09

每個元素都要有唯一的 key 屬性

若單純 dom 位置交換,React 不會知道,會重新渲染,故要加上 key 讓 React 得以辨識。這樣可變免重新渲染一次。

渲染陣列各項數據

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]

class User extends Component {
  render () {
    const { user } = this.props
    return (
      <div>
        <div>姓名:{user.username}</div>
        <div>年齡:{user.age}</div>
        <div>性別:{user.gender}</div>
        <hr />
      </div>
    )
  }
}

class Index extends Component {
  render() {
    return (
      <div>
        {users.map((user, i) => <User key={i} user={user} />)}
      </div>
    )
  }
}

ReactDOM.render(
  <Index onClick={() => console.log('Click')} />,
  document.getElementById('root')
)

參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書







Related Posts

JavaScript 程式執行原理:hw3:Hoisting

JavaScript 程式執行原理:hw3:Hoisting

30-Day LeetCoding Challenge 2020 April Week 4 || Leetcode 解題

30-Day LeetCoding Challenge 2020 April Week 4 || Leetcode 解題

JavaScript判斷式

JavaScript判斷式


Comments