React Props

17 Mar 2025 | 阅读 2 分钟

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

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

当您需要在组件中使用不可变数据时，您必须将 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> Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. </h4> </p>        
          </div>
	  );
   }
}
export default App;

Main.js

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

ReactDOM.render(<App name = "JavaTpoint!!" />, document.getElementById('app'));

输出

默认 Props

不必总是将 props 添加到 reactDom.render() 元素中。您还可以直接在组件构造函数上设置默认 props。可以在下面的示例中进行解释。

示例

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render() {	
      return (
          <div>
              <h1>Default Props Example</h1>
	        <h3>Welcome to {this.props.name}</h3> 
	        <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</p>        
          </div>
        );
    }
}
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(<App/>, document.getElementById('app'));

输出

State 和 Props

可以在您的应用程序中组合 state 和 props。您可以在父组件中设置 state，并使用 props 将其传递到子组件中。可以在下面的示例中显示。

示例

App.js

import React, { Component } from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         name: "JavaTpoint",       
      }
   }
   render() {
      return (
         <div>
            <JTP jtpProp = {this.state.name}/>           
         </div>
      );
   }
}
class JTP extends React.Component {
   render() {
      return (
          <div>
              <h1>State & Props Example</h1>
              <h3>Welcome to {this.props.jtpProp}</h3>
              <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</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'));

输出

下一个主题React Props 验证

← 上一个下一个 →

React Props

示例

默认 Props

示例

State 和 Props

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React Props

示例

默认 Props

示例

State 和 Props

示例

相关帖子

React 片段

React Portals

React 组件 API

React Refs

React CSS

React Hooks

React 键

React 代码拆分

受控 vs 非受控

ReactJS vs AngularJS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器