访问React中props对象上键值对中的键名称

Question

我正在开发一个React应用程序，希望我正在开发的组件能够访问组件正在接收的props对象中的密钥名称。

例如，我有一个对象：

var fido = {
 animal: "dog",
 legs: 4,
 licksSelf: true
}

然后我通过props对象将这个对象传递给我的React组件：

<Pet characteristics={fido} />

然后在我的宠物反应组件中，我想访问密钥和值，我该怎么做？例如，在以下错误代码中：

class Pet extends React.Component {
 render () {
  var petList = this.props.characteristics.map((char) => {
   return (
    <div>{char.key} : {char.value}</div> // <-- what should this code look like?
   );
  };
   return (
    <div>{petList}</div>
   );
  };
};

有人知道我是如何访问props对象上键值对中键的名称的吗？谢谢

Answer 1

使用Object.entries方法：

const petList = Object.entries(fido).map(([key,value])=>{
  return (
      <div>{key} : {value.toString()}</div>
  );
})

value.toString()用于布尔类型以正确呈现