ReactJS道具概览

国家和道具之间的主要区别是道具是不可变的。这就是为什么容器组件应该定义可以更新和更改的状态，而子组件只应该使用道具从状态传递数据。

使用道具

当我们在组件中需要不可变的数据时，我们可以在 main.js中 添加 propDoseDOM.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>
    );
 }
}
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'));

输出与以前相同。

反应道具示例

状态和道具

以下示例显示如何在应用程序中组合状态和道具。我们在父组件中设置状态，并使用道具在组件树中传递它。在 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'));

结果将再次与前面两个例子中的结果相同，唯一不同的是我们的数据源，它现在最初来自该州。当我们想更新它时，我们只需要更新状态，并且所有的子组件都将被更新。更多内容请参阅活动章节。

反应道具示例