时间戳

首页 > 解决方案 > 用对象填充地图/重构

javascript - 用对象填充地图/重构

问题描述

我想在我的地图中返回一个自定义对象，这样我就可以构建一个包含动态列和行的表。

我有我的数据：

 const cols = (p) => {
    <React.Fragment>
     <div>{p.username}</div>
     <div>{p.name}</div>
     <div>{p.surname}</div>
   </React.Fragment>
 }

然后我的行：

const rows = [
   { username : 'Kaherdin', name: 'Aurélien', suername : 'Everett'},
   { username : 'Babar', name: 'Stephane', suername : 'Gentil'}
]

最后我的地图：

{rows.map(row => {
   return cols(row)
  })}

Codesanbox：https ://codesandbox.io/s/0ql6lp4z2p

标签： javascriptreactjs

解决方案

如果您没有明确返回某些内容，则应使用括号而不是花括号。

const cols = (p) => (
    <React.Fragment>
        <div>{p.username}</div>
        <div>{p.name}</div>
        <div>{p.surname}</div>
    </React.Fragment>
 );

如果您想添加更多功能，您应该使用带有 a 的大括号return作为Tholle 的示例。

const cols = (p) => {

    //Extra functionality
    if(!p) return null;
    let myString = "String";


    return(
        <React.Fragment>
            <div>{p.username}</div>
            <div>{p.name}</div>
            <div>{p.surname}</div>
            <div>{myString}</div>
        </React.Fragment>
    )
};

推荐阅读