Question

我知道我的问题还不清楚，我的问题是，我想在JSX中使用map打印我的数组，但是我不想在同一页面中多次这样做，所以如何解决此问题

还有如何在链接中添加ID

我的代码是

<ul>
    <li><b>Admin info</b></li>
            {users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)}
    <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
    <li></li>
</ul>
<ul>
     <li><b>Company Info</b></li>
     <li>Company Profile </li>
     <li>Billing Address and Billing contact</li>
     <li> {users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)}</li>
    <li></li>
 </ul>

Answer 1

由于地图的返回值相同，因此如果它也可以在其他组件中使用，则可以将其设为一个组件。

const MapComponent = ({users}) => (
    return users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)
)

并像使用它

    <ul>
        <li><b>Admin info</b></li>
        <MapComponent users={users} />
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li> <MapComponent users={users} /></li>
        <li></li>
    </ul>

或将其存储在渲染方法的变量中

render() {
      const userItems = users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>)
      return (
           <ul>
            <li><b>Admin info</b></li>
            {userItems}
            <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
            <li></li>
        </ul>
        <ul>
            <li><b>Company Info</b></li>
            <li>Company Profile </li>
            <li>Billing Address and Billing contact</li>
            <li> {userItems}</li>
            <li></li>
        </ul>
     )
}

如果必须更改内容，则可以使用渲染道具模式

const MapComponent = ({data, children}) => (
    return data && data.map((item,i) => children(item))
)

并使用类似

    <ul>
        <li><b>Admin info</b></li>
        <MapComponent data={users.item}>
           {(item) => <li key={i}>{item.email}</li>}
        </MapComponent>
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li> 
            <MapComponent data={users.item}>
                 {(item) => (
                      <ul><li>{item.name}</li><li>{item.email}</li></ul> 
                 )}
            </MapComponent>
        </li>
        <li></li>
    </ul>

Answer 2

假设您的代码处于渲染状态，则可以将map的结果临时存储在一个变量中，并在如下所示的不同位置使用

render() {
  const mappedItems = users.items && users.items.map((item,i) => <li key={i}>{item.email}</li>);
  return (
   <ul>
        <li><b>Admin info</b></li>
        {mappedItems}
        <li><Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin pass and info {data}</Link></li>
        <li></li>
    </ul>
    <ul>
        <li><b>Company Info</b></li>
        <li>Company Profile </li>
        <li>Billing Address and Billing contact</li>
        <li>{mappedItems}</li>
    </ul>
  );
}

如何在const中存储数组

2 个答案: