javascript - 如何在 const 中存储数组

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

由于map的返回值是一样的，如果它也能在其他组件中使用，你可以将其做成一个组件

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>
     )
}

如果内容必须更改，您可以使用渲染 Prop 模式

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>