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()表示要正确呈现的布尔类型

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

1 个答案: