Question

在 ReactJS 中显示对象的 json 数组

2022-04-05

1225

reactjs

我有一个对象数组，想要在 ReactJS 中用一行显示。对象如下所示：

[
  {
     name:"jane",
     age : "20"
  },
  {
     name:"mary",
     age : "21"
  }
  {
     name:"john",
     age : "19"
  }
]

我想要显示的结果为：

jane 20, mary 21, john 19

例如

<span className="name>data.name</span> <span className="age>data.age</span>

我有一个函数，但是它可以连接值，但现在不确定是否能得到我想要的输出

const getData = () => {
    var val = ''
    roles.map((data, inx) => {
      val = val + data.name + data.age

    })
    return (
      <span>{val}</span>
    )
  }

我该怎么做呢

Answer 1

像

val = val + data.name + data.age

这样的连接不起作用，因为您需要 JSX 元素（跨度），而不是纯字符串。

映射时，请检查索引。如果索引为 1 或更多，请在创建 JSX 时在第一个跨度前添加逗号。

const arr = [
  {
     name:"jane",
     age : "20"
  },
  {
     name:"mary",
     age : "21"
  },
  {
     name:"john",
     age : "19"
  }
]
const App = () => {
    return arr.map(({ name, age }, i) => (
        <React.Fragment>
            {i === 0 ? null : ','}
            <span className="name">{name}</span> <span className="age">{age}</span>
        </React.Fragment>
    ));
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>