javascript - 如何在reactjs ListView 中动态显示对象属性

Question

我正在尝试从 json 对象渲染 ListView 。这里的对象属性是动态的，我们无法预测每次加载它可能会获得什么样的属性。

场景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 ListView 做到这一点呢？foo.map() 会起作用吗？或者有其他方法吗？

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

查看实现(表格)

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

有什么建议吗？

谢谢

Answer 1

您可以在 Lists and Keys 上的 React 文档中找到它.

const listItems = Object.values(foo).map((x, i) =>
  <li key={i}>{x}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);