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'));
结果将再次与前两个示例相同,唯一不同的是我们的数据来源,现在它最初来自状态。当我们想要更新它时,我们只需要更新状态,所有的子组件都会被更新。有关此内容的更多信息,请参阅“事件”一章。
在本章中,让我们一一学习以下概念。