在 React.js 中通过已知键名的 Props 访问数据
介绍
Props 是 React 的一个普通对象，它遵循不可变属性。这意味着你不能在整个组件中更改它们的值。Props 和状态采用对象的形式，其中包含可用于呈现对象值的键值对的数量。
通过本指南，您将了解访问 React 组件中 props 和 state 对象的键值对的不同方法。
访问组件中的标准状态对象
React 中的 state 和 props 始终是对象格式。这意味着可以通过键值对从 state 和 props 中访问值。
要访问正常状态对象，您可以使用对象中的键名。状态对象将如下所示。
constructor() {
super();
this.state = {
employee: {
firstname: "FirstName123",
lasttname: "LastName123",
age: "31",
city: "xyzcity",
department: "marketing",
joiningyear: "2015"
}
};
}
员工对象下有几个键值对，因此如果想要访问实际的员工状态对象，可以按如下所示进行访问。
render() {
const { employee } = this.state;
return (
<div>
Access Normal Object
<hr />
<table>
<tr>
<td>First Name :</td>
<td>{employee.firstname}</td>
</tr>
<tr>
<td>Last Name :</td>
<td>{employee.lasttname}</td>
</tr>
<tr>
<td>Department :</td>
<td>{employee.department}</td>
</tr>
</table>
</div>
);
}
render()函数内部有一个主要语句，其中从状态对象访问员工对象。
const { employee } = this.state;
因此，可以通过其密钥访问员工对象，如下所述。
<tr>
<td>First Name :</td>
<td>{employee.firstname}</td>
</tr>
您只需要使用对象名称后跟键名即可访问状态对象的键值对。
从 Props 访问对象数组
之前你已经访问了状态对象的键值对，但是也可以用同样的方式访问 props 对象。
对于更改，您将可以访问对象数组，而不是包含键值对的简单对象。
创建一个新的对象数组，如下所示。
constructor() {
super();
this.state = {
employees: [
{
firstname: "FirstName123",
lasttname: "LastName123"
},
{
firstname: "FirstName456",
lasttname: "LastName456"
}
]
};
}
如所见，员工数组内有两个不同的对象，因此所需的任务是将对象数组传递给子组件并使用它。
要呈现对象数组内的值，可以使用接受数组的map()函数，如下所示。
render() {
const { employees } = this.state;
return (
<div>
<div>
{employees.map(employee => (
<p key={employee.firstname}>
{employee.firstname} : {employee.lasttname}
</p>
))}
</div>
</div>
);
}
在上面的例子中，员工是来自状态对象的对象数组，通过使用 map ()函数进行迭代，并呈现值。
使用 Object.entries() 访问具有已知键名的 Props 数据
Object.entries ()是从 props 对象中提取键值对的数量的另一种方法。
以下是一些简单的语法。
Object.enteries(object_name)
您需要将对象的名称与函数Object.entries()一起传递，该函数获取键值对，然后您可以使用这些已知的键和值，如下所示。
render() {
const { employee } = this.state;
return (
<div>
<div>
{Object.entries(employee).map(([key, value]) => {
return (
<div>
{key} = {value}
</div>
);
})}
</div>
</div>
);
}
如果您只想访问特定的键值对，那么可以按照下面的说明进行操作。
<div>
{Object.entries(employee).map(([key, value]) => {
return (
<div>
{key === "firstname" && key} = {value}
</div>
);
})}
</div>
这里使用了一个附加条件来检查该键是否需要在 DOM 中渲染。否则，该键将不会被渲染。
您可以选择三种不同的方法来将已知的键值对从 props 或任何其他对象渲染到 React。
结论
对象是包含键值对的容器属性。因此，React 中的 state 和 props 是可以使用已知键名使用的对象。
在使用 React 开发应用程序时，有三种不同的方法可以让你的生活更轻松：使用普通的 props 对象、使用对象数组和使用Object.entries。希望你觉得这很有用，学习愉快！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~