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

Codesanbox：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's。

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

用对象填充地图/进行重组

2 个答案: