用对象/重构填充地图

Question

我想在我的映射中返回一个自定义对象，以便我可以构造一个包含动态列和行的表。

我有我的数据：

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

代码 ： https://codesandbox.io/s/0ql6lp4z2p

Answer 1

如果您没有显式返回某些内容，则应使用括号而不是大括号。

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

如果要添加更多功能，则应使用带有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>
    )
};

Answer 2

您不会从cols函数返回任何内容。添加 return 关键字，它将按预期工作。

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