React属性props用法详解 – ReactJS实战教程

上一章ReactJS实战教程请查看：React状态state用法详解

props代表“属性Properties”，它们是只读组件，它是一个存储标签属性值的对象，工作方式类似于HTML属性。它提供了一种将数据从一个组件传递到另一个组件的方法，它类似于函数参数，将props传递给组件的方式与在函数中传递参数的方式相同。

props是不可变的，所以我们不能从组件内部修改props。在组件内部，我们可以添加称为props的属性，这些属性在组件中是这样可用的，在我们的渲染方法中可以用来渲染动态数据。

当你需要组件中的不可变数据时，你必须将props添加到ReactJS项目main.js文件中的reactDom.render()方法中，并在需要的组件中使用它。它可以在下面的例子中解释。

例子

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
            <h1> Welcome to { this.props.name } </h1>    
            <p> <h4>srcmini - IT开发教程网</h4> </p>          
          </div>  
      );  
   }  
}  
export default App;  

mian.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App name = "SRCMINI" />, document.getElementById('app'));  

默认props

不必总是在reactDom.render()元素中添加props，你还可以直接在组件构造函数上设置默认的props。它可以在下面的例子中解释。

例子

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {     
      return (  
          <div>  
              <h1>默认props例子</h1>  
            <h3>Welcome to {this.props.name}</h3>   
            <p>srcmini - IT开发教程网</p>          
          </div>  
        );  
    }  
}  
App.defaultProps = {  
   name: "SRCMINI"  
}  
export default App;  

main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

状态state和属性props

你可以在应用程序中组合状态state和属性props，你可以在父组件中设置状态，并使用props在子组件中传递状态，它可以在下面的示例中显示。

例子

App.js

import React, { Component } from 'react';  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {  
         name: "SRCMINI",         
      }  
   }  
   render() {  
      return (  
         <div>  
            <JTP jtpProp = {this.state.name}/>             
         </div>  
      );  
   }  
}  
class JTP extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>State & Props 例子</h1>  
              <h3>Welcome to {this.props.jtpProp}</h3>  
              <p>srcmini - IT开发教程网</p>  
         </div>    
      );  
   }  
}  
export default App;  

main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));