Question

基本上我需要将一个对象渲染到一个react组件中。它看起来像这样：

var obj = {
  prop1: "prop1",
  prop2: "prop2",
  prop3: "prop3", 
}

我只想打印出属性名称和值，为此我正在使用map，目前看起来像这样：

render(){
  return(
   <div>
    {Object.keys(obj).map(function(data, key){
      return (<div>{data}</div>);
    })}
   </div>
 );
}

问题是，我拥有它的方式，我只能渲染属性名称，我尝试了几种方法来访问属性的值，但到目前为止没有任何作用。

我该怎么做？

Answer 1

使用括号表示法

使用obj[key]获取价值（我已将data重命名为key）：

var obj = {
  prop1: "prop1",
  prop2: "prop2",
  prop3: "prop3", 
}

render(){
  return(
   <div>
    {Object.keys(obj).map(function(key){
      return (<div>{`${key}:${obj[key]}`}</div>);
    })}
   </div>
 );
}

使用Object#entries

Object#entries返回给定对象自己的可枚举属性[key，value]对的数组。您可以使用它代替Object#keys，然后使用Array#map迭代结果。但是，它仅受Chrome和FireFox的支持。

var obj = {
  prop1: "prop1",
  prop2: "prop2",
  prop3: "prop3", 
}

render(){
  return(
   <div>
    {Object.entries(obj).map(function([key, value]){
      return (<div>{`${key}:${value}`}</div>);
    })}
   </div>
 );
}

使用.map（）呈现JS对象的属性值和属性名称

1 个答案: