📌  相关文章
📜  ReactJS道具-JavaPoint

📅  最后修改于: 2020-12-19 03:52:41             🧑  作者: Mango

反应道具

道具代表“属性” 。它们是只读组件。它是一个存储标记属性值的对象，其工作方式类似于HTML属性。它提供了一种将数据从一个组件传递到其他组件的方法。它类似于函数参数。道具被传递到组件以同样的方式作为变量，函数传递。

道具是不可变的，因此我们无法从组件内部修改道具。在组件内部，我们可以添加称为props的属性。这些属性作为this.props在组件中可用，并且可以在我们的render方法中用于渲染动态数据。

当您在组件中需要不可变数据时，必须在ReactJS项目的main.js文件中的props添加到reactDom.render()方法中，并在所需的组件中使用它。可以在以下示例中进行说明。

例

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render() {    
      return (
          

            
 Welcome to { this.props.name } 
  
            
 
 Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. 
 
        
          

      );
   }
}
export default App;

Main.js

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

ReactDOM.render(, document.getElementById('app'));

输出量

默认道具

不必总是在reactDom.render()元素中添加道具。您还可以直接在组件构造函数上设置默认道具。可以在以下示例中进行说明。

例

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render() {    
      return (
          

              
Default Props Example

            
Welcome to {this.props.name}
 
            
Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.
        
          

        );
    }
}
App.defaultProps = {
   name: "JavaTpoint"
}
export default App;

Main.js

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

ReactDOM.render(, document.getElementById('app'));

输出量

状态与道具

可以在您的应用程序中组合状态和道具。您可以在上级组件中设置状态，然后使用prop在子级组件中传递状态。可以在下面的示例中显示。

例

App.js

import React, { Component } from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         name: "JavaTpoint",       
      }
   }
   render() {
      return (
         

                       
         

      );
   }
}
class JTP extends React.Component {
   render() {
      return (
          

              
State & Props Example

              
Welcome to {this.props.jtpProp}

              
Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.

         
  
      );
   }
}
export default App;

Main.js

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

ReactDOM.render(, document.getElementById('app'));

输出：