了解React Js中的所有道具

What is ReactJS Props: A Beginner’s Guide

基本上，这些props组件是只读组件。在ReactJS中，数据可以通过这些props从一个组件传递到另一个组件，类似于函数中的参数传递方式。在组件内部，我们可以添加称为props的属性；但是，我们不能在组件内部改变或修改props，因为它们是不可改变的。

使用 "this.props"，我们可以在组件中使用props。然后，动态数据可以通过渲染方法进行渲染。如果我们在组件中需要不可变的数据，我们需要在ReactJS项目的Main.js文件中的renderDOM.render()中添加props。然后我们可以在我们想使用这些动态数据的组件中使用它。

现在让我们通过一个例子来看看代码的实现。

例子:

下面的代码是Main.js文件。在这里，我们通过名为reactDOM.render的渲染方法在App组件中传递name属性的动态数据。

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App name = "World of Programming!/>, document.getElementById('app'))。

下面的代码是针对App.js的。在这里，我们使用Main.js文件中作为道具传递的名称属性的动态数据，并在这个App组件中使用 "this.props "使道具可用。

import React, { Component } from 'react';  

class App extends React.Component {  

   render() {    

      return (  

          <div>  

            <h1> Welcome to the { this.props.name } </h1>    

            <p> <h4> Here you will get to know so many things and your knowledge will be enhanced . </h4> </p>          

          </div>  

      );  

   }  

}  

export default App;

现在让我们来讨论ReactJS中的默认道具。

ReactJS中的默认道具

一般来说，默认道具可以直接发送到我们组件的构造函数中。因此，这些道具需要由我们添加到reactDOM.render中。

现在让我们来看看这些默认道具的代码实现。

例子

在下面的代码中，我们可以看到默认道具是如何在App.js中设置的。

import React, { Component } from 'react';  

class App extends React.Component {  

   render() {    

      return (  

          <div>  

              <h1>Example for the default props : </h1>  

            <h3>Welcome to the {this.props.name}</h3>  

            <p>Here you will get to know so many things and your knowledge will be enhanced .</p>          

          </div>  

        );  

    }  

}  

App.defaultProps = {  

   name: "World of Programming!"  

}  

export default App;

如下面的代码所示，默认道具不需要通过ReactJS项目的Main.js文件中名为reactDOM.render()的渲染方法传递。

import React from 'react';  

import ReactDOM from 'react-dom';  

import App from './App.js';  

ReactDOM.render(<App/>, document.getElementById('app'));

现在让我们来讨论状态和道具。

ReactJS中的状态和道具

状态是ReactJS中的内置对象类型。

我们可以使用状态对象在组件中创建、处理或管理我们的数据。数据可以由道具传递，但数据不能由状态本身传递。使用状态，数据是在组件内部管理的。

我们可以在ReactJS的应用程序中结合状态和props。在我们的ReactJS中，状态和道具的组合过程的步骤如下L

首先，状态需要在我们的父组件中被设置。
然后，状态可以作为道具在子组件中传递。

现在让我们通过一个例子来看看这个代码的实现。

例子

下面给出的代码是针对App.js文件的。这段代码显示了我们如何在父组件中设置状态，然后在子组件中作为props传递并使用它。

import React, { Component } from 'react';  

class App extends React.Component {  

   constructor(props) {  

      super(props);  

      this.state = {  

         name: "Programming World",        

      }  

   }  

   render() {  

      return (  

         <div>  

            <PW pwProp = {this.state.name}/>            

         </div>  

      );  

   }  

}  

class PW extends React.Component {  

   render() {  

      return (  

          <div>  

              <h1>The example for the combination of states and props within an application.</h1>  

              <h3>Welcome to the this.props.pwProp}</h3>  

              <p>Here you will get to know so many things and your knowledge will be enhanced .</p>  

         </div>    

      );  

   }  

}  

export default App;

下面的代码是React项目的Main.js文件。

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App/>, document.getElementById('app'))。

状态vs.道具

让我们来看看状态和道具的基本区别。

状态	道具
使用案例	状态用于存储需要渲染到视图中的组件的数据。	Props用于将数据和事件处理程序传递给子组件。
可变性	状态保存数据，可以随时间变化	道具是不可变的--一旦设置，道具就不能改变。
组件	状态只能在类组件中使用	道具可以在功能组件和类组件中使用
更新	事件处理程序通常会更新状态	父组件为子组件设置道具

就这样，我们现在已经熟悉了道具，这是React最重要的概念之一。

结论

Props对象在ReactJs中扮演着非常重要的角色。我们可以通过道具将属性从一个组件传递给另一个组件，在我们的组件中使用动态数据。由于props是只读组件，我们从父组件传递的props不能在传递数据的子组件中改变。

这就是关于ReactJS中的props的全部内容。如你所知，如今，除了数据结构和算法，你的开发技能对于在技术行业中取得成就同样至关重要。因此，一个技术人员应该始终保持自己在网络开发领域的最新技术和软件的升级和更新。

React Js中Props对象介绍及应用实例

了解React Js中的所有道具

目录

例子:

ReactJS中的默认道具

例子

ReactJS中的状态和道具

例子

状态vs.道具

状态

道具

结论