ReactJS - 属性（props）

---

---

React 使开发人员能够使用属性创建动态和高级组件。每个组件都可以具有类似于 HTML 属性的属性，并且可以使用属性 （props） 在组件内部访问每个属性的值。

例如，可以通过变量在组件内部访问具有 name 属性 this.props.name Hello 组件。

<Hello name="React" />
// value of name will be "Hello* const name = this.props.name

React properties 支持不同类型的 attribute 值。它们如下，

• String
• Number
• Datetime
• Array
• List
• Objects

使用道具

当我们在组件中需要不可变数据时，我们只需在 main.js 中向 reactDOM.render（） 函数添加 props，并在我们的组件中使用它。

App.jsx

import React from 'react';

class App extends React.Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>{this.props.headerProp}</h1>
	 	 	 	 	 	 <h2>{this.props.contentProp}</h2>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
	 	from props..."/>, document.getElementById('app'));

export default App;

这将产生以下结果。

默认属性

您也可以直接在组件构造函数上设置默认属性值，而不是将其添加到 reactDom.render（） 元素中。

App.jsx

import React from 'react';

class App extends React.Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>{this.props.headerProp}</h1>
	 	 	 	 	 	 <h2>{this.props.contentProp}</h2>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
App.defaultProps = {
	 	headerProp: "Header from props...",
	 	contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

输出与以前相同。

状态与道具

以下示例演示如何在应用中组合 state 和 props。我们在父组件中设置状态，并使用 props 将其传递到组件树中。在 render 函数内部，我们设置了子组件中使用的 headerProp 和 contentProp。

App.jsx

import React from 'react';

class App extends React.Component {
	 	constructor(props) {
	 	 	 super(props);
	 	 	 this.state = {
	 	 	 	 	header: "Header from props...",
	 	 	 	 	content: "Content from props..."
	 	 	 }
	 	}
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <Header headerProp = {this.state.header}/>
	 	 	 	 	 	 <Content contentProp = {this.state.content}/>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
class Header extends React.Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>{this.props.headerProp}</h1>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
class Content extends React.Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h2>{this.props.contentProp}</h2>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

结果将再次与前两个示例相同，唯一不同的是我们的数据来源，现在它最初来自状态。当我们想要更新它时，我们只需要更新状态，所有的子组件都会被更新。有关此内容的更多信息，请参阅“事件”一章。

在本章中，让我们一一学习以下概念。

• 使用“属性”创建组件
• 嵌套组件
• 使用组件
• 组件集合