Question

我正在构建一个反应应用程序，但偶然发现如何从数组中提取值，以便以后可以单独设置每个项目的样式。

这是情况， javascript中有一个对象数组：

let array = [{a: 1, b: 2, c: 3, d: -1}, {a: 4, b: 5, c: 6, d: -2}, {a: 7, b: 8, c: 9, d: -3}]

我想映射数组，以便我可以从数组中的每个对象中提取某些值。

array.map((object) => {
  return <li>{object.a}{object.b}{object.d}</li>
})

我得到的是：

1 2 -1
4 5 -2
7 8 -3

我不能轻易地在一行中设置单个项目的样式。我想要的结果是：

1
2
-1
4
5
-2 ...

我应该如何映射对象数组，以便输出自己的

标签中的每个项目？

Answer 1

如果您使用的是最新的反应版本（16+），那么您可以使用React.Fragment这样写它：

array.map((object, i) => (
    <React.Fragment key={i}> 
        <li>{object.a}</li>
        <li>{object.b}</li>
        <li>{object.d}</li>
    </React.Fragment> 
))

对于反应版本＆lt; 16（这种方法也适用于16+），写成这样：

array.map((object, i) => (
    [ 
        <li key={i}>{object.a}</li>,
        <li key={i+1}>{object.b}</li>,
        <li key={i+2}>{object.d}</li>,
    ]
))

注意：我使用索引作为密钥，请确保在代码中使用正确的密钥。

Answer 2

你可以这样做：

array.map((object) => {
  return <li>{object.a}</li><li>{object.b}</li><li>{object.d}</li>
})

Answer 3

// ES6 

const list = number => `<li> ${number} </li>`;
const mapObject = ({ a, b, d }) => [a, b, d].map(x => list(x))
const reduceList = (acc, next) => acc.concat(next);

array
  .map(mapObject)
  .reduce(reduceList, []);

// ONE LINER
array
  .map(({ a, b, d }) => [a, b, d].map(x => `<li> ${x} </li>`))
  .reduce((acc, next) => acc.concat(next), []);

简单反应应用程序中的数据结构

3 个答案: