正如我们之前在本教程中已经学到的，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，然后按回车键。
在网页中使用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，然后按回车键。
在网页中使用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>
