ReactJS - 属性 (props)
React 允许开发人员使用属性创建动态和高级组件。每个组件都可以具有类似于 HTML 属性的属性，并且可以使用属性 (props) 在组件内部访问每个属性的值。
例如，具有 name 属性的 Hello 组件可以在组件内部通过 this.props.name 变量进行访问。
<Hello name="React" /> // name 的值将是 "Hello* const name = this.props.name
React 属性支持不同类型的属性值。它们如下，
- String
- Number
- Datetime
- Array
- List
- Objects
使用 Props
当我们在组件中需要不可变数据时，我们只需在 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;
这将产生以下结果。
默认 Props
您还可以直接在组件构造函数上设置默认属性值，而不是将其添加到 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
以下示例展示了如何在应用中结合使用 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'));
结果将与前两个示例相同，唯一不同的是我们的数据源，现在它最初来自状态。当我们想要更新它时，我们只需要更新状态，所有子组件都会更新。有关此内容的更多信息，请参阅事件章节。
让我们在本章中逐一学习以下概念。
