如何将属性对象传递给子组件
介绍
React 是一个基于 JavaScript 的用于创建优秀用户界面的库，通过它我们可以创建不同的 UI 组件。
由于其极其强大的基础和全球重要的社区支持资源，它是最受欢迎的基于 JavaScript 的库之一。
在本指南中，我们将学习 React 中的 props，包括如何声明它们以及如何将属性对象传递给子组件。
React 中的 Props 是什么?
React 是一个基于组件的库，其中每个应用程序可以分为多个组件，这些组件作为单一的通用单元，可以提供任何特定的功能。
React 的骨干概念有很多，但讨论最多的主题之一是props。React 中的 props 是信息片段，换句话说，我们可以说 props 是只读数据，可以被应用程序中的各个组件传递和使用。
Props 通常是一个静态值、对象或数组。通过使用这些数据，我们可以将它们传递给子组件或将它们从子组件移动到父组件，从而与每个组件进行通信。
如何声明 Props?
Props 是 properties 的缩写，表示某物要使用的信息。在 React 中，可以通过提供适当的名称以及我们需要传递的适当值来声明 props。
要声明一个 props，我们应该提供唯一的名称以及组件或元素，如下所示使用文件index.js。
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import DemoComponent from "./DemoComponent";
class App extends Component {
constructor() {
super();
this.state = {
};
}
render() {
return (
<div>
<DemoComponent
name={"Test"}
age={25}
email={"test@test.com"}
salary={66.5}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
在此示例中，我们有一个子组件，我们将在其中传递不同的属性，以便 DemoComponent可以使用它，源代码如下所示。
Nname、age、email 和 salary 是独立的 props 名称，并且我们随这些 props 提供了合适的值。将 props 提供给子组件后，我们需要访问它们。
要访问从父组件传递的 props，我们可以轻松地将它们使用到子组件中，就像这样。
DemoComponent.js
import React, { Component } from "react";
class DemoComponent extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
const { name, age, email, salary } = this.props;
return (
<div>
<table>
<tr>
<td>Name is : {name}</td>
</tr>
<tr>
<td>Age is : {age}</td>
</tr>
<tr>
<td>Email is : {email}</td>
</tr>
<tr>
<td>Salary is : {salary}</td>
</tr>
</table>
</div>
);
}
}
export default DemoComponent;
您可以看到DemoComponent文件，它是我们的子组件，但要注意的一点是我们如何访问 props。
const { name, age, email, salary } = this.props;
这样，每个 prop 都会被存储为const，我们可以随时访问它。但请记住，我们无法更改它，因为所有 prop 都是只读的。
我们也可以直接访问道具，就像这样。
render() {
return (
<div>
<table>
<tr>
<td>Name is : {this.props.name}</td>
</tr>
<tr>
<td>Age is : {this.props.age}</td>
</tr>
<tr>
<td>Email is : {this.props.email}</td>
</tr>
<tr>
<td>Salary is : {this.props.salary}</td>
</tr>
</table>
</div>
);
}
}
这就是我们直接使用props的方式，使用this.props后跟具体的props名称，由父组件转发给子组件。
如何将对象作为道具传递给子组件
我们刚刚看到了如何将单独的值作为 props 传递并将其放入子组件中，但这有其局限性；因此，有时我们可能需要将数组或对象作为 prop 传递。
对象是 JavaScript 中最常用的术语之一。它用于传递一组键和值对，并使用不同的键名来使用它。
我们还可以将完整的对象作为 prop 传递给子组件，并像使用标准静态 props 一样使用它。
打开index.js文件并替换以下几行源代码。
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import ChildComponent1 from "./ChildComponent1";
class App extends Component {
constructor() {
super();
this.state = {
employee: {
empCode: "119",
name: "Test employee",
age: "25",
email: "abc@abc.com",
location: "Hyderabad"
}
};
}
render() {
return (
<div>
/* Used employee as props name */
<ChildComponent1 employee={this.state.employee} />
</div>
);
}
}
render(<App />, document.getElementById("root"));
在这个例子中，我们在状态中创建了一个简单的对象。它被称为employee，如下所示。
employee: {
empCode: "119",
name: "Test employee",
age: "25",
email: "abc@abc.com",
location: "Hyderabad."
}
该对象包含单个员工的基本属性，包括代码，姓名，年龄以及子组件中正在使用的其他信息。
现在让我们将完整的员工道具使用到子组件中，创建一个名为ChildComponent1.js的新文件，并粘贴以下源代码行。
import React, { Component } from "react";
class ChildComponent1 extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
// Used employee props
const { employee } = this.props;
return (
<div>
<table>
<tr>
<td>Employee Code : {employee.empCode}</td>
</tr>
<tr>
<td>Employee Name : {employee.name}</td>
</tr>
<tr>
<td>Employee Age : {employee.age}</td>
</tr>
<tr>
<td>Employee Email : {employee.email}</td>
</tr>
<tr>
<td>Employee Location : {employee.location}</td>
</tr>
</table>
</div>
);
}
}
export default ChildComponent1;
在此示例中，我们已经使用了员工道具，但是我们以对象形式访问道具的方式与普通道具相比有很大不同。
<tr>
<td>Employee Code : {employee.empCode}</td>
</tr>
员工道具是一个包含不同键数和值的对象，因此如果我们想要访问任何特定的键，那么我们需要与键一起写一个对象名称，以便可以使用它来呈现值。
同样的，我们也可以将数组作为props传递，但是访问props的方式会有所不同。
这就是我们如何将 props 作为对象从父组件传递到子组件并使用，但我们也可以将完整的元素作为 props 传递给子组件，我们将在接下来学习。
如何将元素作为 Prop 传递？
到目前为止，在本指南中，我们已经研究了如何传递标准 props、对象作为 props 的不同示例，但除了这些选项之外，我们还可以在 React 中将 HTML 元素作为 props 传递。
我们想要传递的元素将被渲染到子组件中，并且可以作为完整元素从父组件移动到子组件的标签之间。
我们直接进入示例，其中展示了将div元素作为 props 传递给子组件。
打开名为index.js的文件并粘贴以下源代码行。
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import ChildComponent2 from "./ChildComponent2";
class App extends Component {
constructor() {
super();
this.state = {
message: ""
};
}
render() {
return (
<div>
<ChildComponent2>
<div>This is div 1</div>
<div>This is div 2</div>
<div>This is div 3</div>
</ChildComponent2>
</div>
);
}
}
render(<App />, document.getElementById("root"));
子组件名称是ChildComponent2，但是如果您注意到，我们没有使用通常在其他方法中使用的任何 props 名称。
在此示例中，我们使用了三个不同的div元素，这些元素被子组件名称包围。这意味着所有这些元素都将成为子组件的 prop。
现在让我们将它用到子组件ChildComponent2.js中，如下所示。
import React, { Component } from "react";
class ChildComponent2 extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
const { children } = this.props;
return <div>{this.props.children}</div>;
}
}
export default ChildComponent2;
如你所见，我们刚刚使用了 props 名称children。这意味着如果任何元素作为 props 从父组件传递，它就是默认属性。
换句话说，我们可以说 children 属性就是我们在组件的开始和结束标签之间包含的内容。
只需一句话就能理解：
<div>{this.props.children}</div>
props.children是一种访问在打开和关闭子组件标签之间传递的子元素的方法，如下所示。
<ChildComponent2>
<div>This is div 1</div>
<div>This is div 2</div>
<div>This is div 3</div>
</ChildComponent2>
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~