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

您可以在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')
);

Answer 2

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

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

Answer 3

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

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

这使您无需执行当前对象即可执行所需的操作。

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

3 个答案: