1. 首页
  2. ReactJS 菜鸟教程
  3. ReactJS - 使用属性创建组件

ReactJS - 使用属性创建组件

正如我们之前在本教程中已经学到的，React 是一个非常灵活的库，有时具有可弯曲的规则，但它严格遵循一个规则：如果一个组件被定义为函数或类，那么就其属性而言，它必须像纯函数一样运行。React 中的纯函数被定义为其输入不得更改的函数，因此它不会改变其结果。

简而言之，传递给组件的 Props 是只读的。但是，由于应用程序 UI 是动态的，并且会随着时间的推移而改变其输入，因此我们使用“状态”概念来处理它。

状态的概念允许 React 组件在不违反此规则的情况下更改其结果，作为对不断变化的用户操作、网络响应等的响应。

如何使用属性创建组件？

在本章中，让我们看看使用属性创建组件的步骤 -

我们将首先修改我们的 ExpenseEntryItem 组件并尝试使用属性。

第 1 步 - 在您最喜欢的编辑器中打开我们的费用管理器应用程序。

打开 src/components 文件夹中的 ExpenseEntryItem 文件。

第 2 步 - 使用参数属性引入构造函数。

constructor(props) {	
	 	super(props);	
}

接下来，更改 render 方法并从 props 填充值。

render() {
	 	return (
	 	 	 <div>
	 	 	 	 	<div><b>Item:</b> <em>{this.props.name}</em></div>
	 	 	 	 	<div><b>Amount:</b> <em>{this.props.amount}</em></div>
	 	 	 	 	<div><b>Spend date:</b>	
	 	 	 	 	 	 <em>{this.props.spenddate.tostring()}</em></div>
	 	 	 	 	<div><b>Category:</b> <em>{this.props.category}</em></div>
	 	 	 </div>
	 	);
}

这里

  • name 表示 String 类型的项名称
  • amount 表示类型为 number 的物料金额
  • spendDate 表示项目的 Spend Date 类型为 date
  • category 表示 String 类型的项类别

现在，我们已经成功地使用属性更新了组件。

import React from 'react'
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css'

class ExpenseEntryItem extends React.Component {
	 	constructor(props) {
	 	 	 super(props);
	 	}
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <div><b>Item:</b> <em>{this.props.name}</em></div>
	 	 	 	 	 	 <div><b>Amount:</b> <em>{this.props.amount}</em></div>
	 	 	 	 	 	 <div><b>Spend Date:</b>	
	 	 	 	 	 	 	 	<em>{this.props.spendDate.toString()}</em></div>
	 	 	 	 	 	 <div><b>Category:</b> <em>{this.props.category}</em></div>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
export default ExpenseEntryItem;

index.js

现在，我们可以通过在index.js中的特性中传递所有属性来使用该组件。

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

const name = "Grape Juice"
const amount = 30.00
const spendDate = new Date("2020-10-10")
const category = "Food"

ReactDOM.render(
	 	<React.StrictMode>
	 	 	 <ExpenseEntryItem
	 	 	 	 	name={name}
	 	 	 	 	amount={amount}
	 	 	 	 	spendDate={spendDate}
	 	 	 	 	category={category} />
	 	</React.StrictMode>,
	 	document.getElementById('root')
);

使用 npm 命令为应用程序提供服务。

npm start

打开浏览器，在地址栏中输入 http://localhost:3000，然后按回车键。

Grape Modules

在网页中使用CDN执行此操作的完整代码如下 -

<!DOCTYPE html>
<html>
	 	<head>
	 	 	 <meta charset="UTF-8" />
	 	 	 <title>React based application</title>
	 	</head>
	 	<body>
	 	 	 <div id="react-app"></div>
	 	 		
	 	 	 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
	 	 	 <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
	 	 	 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	 	 	 <script type="text/babel">
	 	 	 	 	class ExpenseEntryItem extends React.Component {
	 	 	 	 	 	 constructor(props) {
	 	 	 	 	 	 	 	super(props);
	 	 	 	 	 	 }
	 	 	 	 	 	 render() {
	 	 	 	 	 	 	 	return (
	 	 	 	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Item:</b> <em>{this.props.name}</em></div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Amount:</b> <em>{this.props.amount}</em></div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Spend Date:</b> <em>{this.props.spendDate.toString()}</em></div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Category:</b> <em>{this.props.category}</em></div>
	 	 	 	 	 	 	 	 	 </div>
	 	 	 	 	 	 	 	);
	 	 	 	 	 	 }
	 	 	 	 	}
	 	 	 	 	const name = "Grape Juice"
	 	 	 	 	const amount = 30.00
	 	 	 	 	const spendDate = new Date("2020-10-10")
	 	 	 	 	const category = "Food"

	 	 	 	 	ReactDOM.render(
	 	 	 	 	 	 <ExpenseEntryItem	
	 	 	 	 	 	 	 	name={name}	
	 	 	 	 	 	 	 	amount={amount}	
	 	 	 	 	 	 	 	spendDate={spendDate}	
	 	 	 	 	 	 	 	category={category} />,
	 	 	 	 	 	 document.getElementById('react-app') );
	 	 	 </script>
	 	</body>
</html>

作为属性的对象

在本章中，让我们学习如何使用 JavaScript 对象作为属性。

第 1 步 - 在您最喜欢的编辑器中打开我们的费用管理器应用程序。

打开ExpenseEntryItem.js文件。

第 2 步 - 接下来，更改render（）方法并通过this.props.item属性访问输入对象项。

render() {
	 	return (
	 	 	 <div>
	 	 	 	 	<div><b>Item:</b> <em>{this.props.item.name}</em></div>
	 	 	 	 	<div><b>Amount:</b> <em>{this.props.item.amount}</em></div>
	 	 	 	 	<div><b>Spend Date:</b>	
	 	 	 	 	 	 <em>{this.props.item.spendDate.toString()}</em></div>
	 	 	 	 	<div><b>Category:</b> <em>{this.props.item.category}</em></div>
	 	 	 </div>
	 	);
}

打开 index.js并在 JavaScript 对象中表示费用分录项。

const item = {	
	 	id: 1,	
	 	name : "Grape Juice",	
	 	amount : 30.5,	
	 	spendDate: new Date("2020-10-10"),	
	 	category: "Food"	
}

在组件属性中使用大括号 （{}） 语法将对象传递给组件。

 <ExpenseEntryItem item={item} />

index.js

index.js的完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

const item = {
	 	id: 1,	
	 	name : "Grape Juice",	
	 	amount : 30.5,	
	 	spendDate: new Date("2020-10-10"),	
	 	category: "Food"	
}
ReactDOM.render(
	 	<React.StrictMode>
	 	<ExpenseEntryItem item={item} />
	 	</React.StrictMode>,
	 	document.getElementById('root')
);

使用 npm 命令为应用程序提供服务。

npm start

打开浏览器，在地址栏中输入 http://localhost:3000，然后按回车键。

Grape Modules

在网页中使用CDN执行此操作的完整代码如下 :

<!DOCTYPE html>
<html>
	 	<head>
	 	 	 <meta charset="UTF-8" />
	 	 	 <title>React based application</title>
	 	</head>
	 	<body>
	 	 	 <div id="react-app"></div>
	 	 		
	 	 	 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
	 	 	 <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
	 	 	 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	 	 	 <script type="text/babel">
	 	 	 	 	class ExpenseEntryItem extends React.Component {
	 	 	 	 	 	 constructor(props) {
	 	 	 	 	 	 	 	super(props);
	 	 	 	 	 	 }
	 	 	 	 	 	 render() {
	 	 	 	 	 	 	 	return (
	 	 	 	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Item:</b>	
	 	 	 	 	 	 	 	 	 	 	 	 <em>{this.props.item.name}</em></div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Amount:</b>	
	 	 	 	 	 	 	 	 	 	 	 	 <em>{this.props.item.amount}</em></div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Spend Date:</b>	
	 	 	 	 	 	 	 	 	 	 	 	 <em>{this.props.item.spendDate.toString()}</em>
	 	 	 	 	 	 	 	 	 	 	</div>
	 	 	 	 	 	 	 	 	 	 	<div><b>Category:</b>	
	 	 	 	 	 	 	 	 	 	 	 	 <em>{this.props.item.category}</em>
	 	 	 	 	 	 	 	 	 	 	</div>
	 	 	 	 	 	 	 	 	 </div>
	 	 	 	 	 	 	 	);
	 	 	 	 	 	 }
	 	 	 	 	}
	 	 	 	 	const item = {
	 	 	 	 	 	 id: 1,	
	 	 	 	 	 	 name : "Grape Juice",	
	 	 	 	 	 	 amount : 30.5,	
	 	 	 	 	 	 spendDate: new Date("2020-10-10"),	
	 	 	 	 	 	 category: "Food"	
	 	 	 	 	}
	 	 	 	 	ReactDOM.render(
	 	 	 	 	 	 <ExpenseEntryItem item={item} />,
	 	 	 	 	 	 document.getElementById('react-app')	
	 	 	 	 	);
	 	 	 </script>
	 	</body>
</html>
<< ReactJS - 属性（props） ReactJS - props 验证 >>