react列表渲染提取组件

函数式组件

function ListItem(props) {
  let obj = props.obj;
  return Object.keys(obj).map((item) => {
    return (
      <li>
        {item}:{obj[item]}
      </li>
    );
  });
}
export default function Key() {
  const arr = [
    { name: "小明", age: 18 },
    { name: "小郭", age: 18 },
  ];
  return (
    <div>
     {
       arr.map(item=>{
       //一、组件内正常写法
          return (
           <div>
             <h6>{item.name}:{item.age}</h6>
          </div>
       )
      //  二：提取组件
        return <ListItem obj={item} key={item} />;
       })
     }
    </div>
  );
}

二、类组件

import React, { Component } from "react";
function ListItem(props) {
  let obj = props.obj;
  return Object.keys(obj).map((item) => {
    return (
      <li>
        {item}:{obj[item]}
      </li>
    );
  });
}
export default class Key extends Component {
  constructor() {
    super();
    this.state = {
      arr: [
        { name: "小明", age: 18 },
        { name: "小郭", age: 18 },
      ],
    };
  }
  render() {
    const {arr} = this.state;
    return (
      <div>
        {arr.map((obj) => {
          // return (
          //   <div>
          //     {Object.keys(obj).map((item, index) => {
          //       return (
          //         <p key={index}>
          //           {item} : {obj[item]}
          //         </p>
          //       );
          //     })}
          //   </div>
          // );
          return <ListItem obj={obj} key={obj} />;
        })}
      </div>
    );
  }
}