如何在 reactjs 列表视图中动态显示对象属性

Question

我正在尝试从json对象呈现列表视图。这里的对象属性是动态的，我们无法预测每次加载它可能获得的属性类型。

场景 1：

let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};

场景 2：

let foo = {
abc: '123',
xyz: 'timestamp string format'
};

我用普通的javascript尝试过这个， 但是如何使用 ReactJS 列表视图做到这一点？ foo.map(( 会起作用还是有其他方法？

for (var key in foo) {
console.log(key+' : '+foo[key]);
}

要实现的视图(表(

bar  | helloworld
baz  | how are u doing
last | Quite alright

有什么建议吗？

谢谢

Answer 1

你可以在 React 文档的列表和键中找到这个。

const listItems = Object.values(foo).map((x, i) =>
<li key={i}>{x}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);

Answer 2

我建议的方法是使用Object.keys：

<ul>
{Object.keys(foo).map(key => 
<li key={key}>{key} | {foo[key]}</li>
)}
</ul>

这允许您执行所需的操作，而无需操作当前对象。

Answer 3

可能有多种方法可以做到这一点。我认为这是最直接的。

<ul className="my-list">
{Object.values(foo).map((myFoo, i) =>
<li key={i}>{myFoo.key} | {myFoo.value}</li>
)}
</ul>