reactjs - 在 React 中访问 props 对象的键值对中的键名

Question

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

例如，我有这个对象:

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

然后我通过 props 对象将此对象传递给我的 React 组件:

<Pet characteristics={fido} />

然后在 Pet 的 React 组件中，我想访问键和值，我该怎么做？例如，在以下错误代码中:

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() 用于 bool 类型正确渲染