进一步把渲染单独一个用户的结构抽离出来作为一个列表组件

最新推荐文章于 2021-11-19 20:12:47 发布

wangfy_

最新推荐文章于 2021-11-19 20:12:47 发布

阅读量205

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/chushoufengli/article/details/88894068

版权

front 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

把负责展示用户数据的 JSX 结构抽离成一个组件 User ，并且通过 props 把 user 数据作为组件的配置参数传进去；这样改写 Index 就非常清晰了，看一眼就知道负责渲染 users 列表，而用的组件是 User。

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) => <User user={user} />)}
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)