React Props 属性

定义和使用

Props 是传递给 React 组件的参数。

Props 通过 HTML 属性传递给组件。

注意，本教程 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

React Props 就像 JavaScript 中的函数参数和 HTML 中的属性一样。

要将 Props 发送到组件中，请使用与 HTML 属性相同的语法。

现在我们向 Car 元素添加 "brand" 属性。

该组件将参数作为 props 对象接收。

在组件中使用 "brand" 属性如下示例：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>我是一辆 {this.props.brand}!</h2>
  }
}

const myelement = <Car brand="Ford" />;

ReactDOM.render(myelement, document.getElementById('root'));

运行结果如下：

传递数据

Props 也是将数据从一个组件传递到另一组件作为参数的方式。

将 "brand" 属性从车库组件发送到汽车组件：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>我是一辆 {this.props.brand}！</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>谁住在我的车库里？</h1>
      <Car brand="Ford" />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

如果您有一个要发送的变量，而不是上面的示例中的字符串，则只需将变量名放在大括号中即可：

创建一个名为 "carname" 的变量，并将其发送到 Car 组件：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>我是一辆 {this.props.brand}！</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>谁住在我的车库里？</h1>
      <Car brand={carname} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

运行结果如下：

或者，如果它是一个对象：

创建一个名为 "carinfo" 的对象，并将其发送到Car组件：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>我是一辆 {this.props.brand.model}！</h2>;
  }
}

class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>谁住在我的车库里？</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

运行结果如下：

构造函数中的 Props

如果您的组件具有构造函数，则应始终通过 super() 方法将 props 传递给构造函数以及 React.Component。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>我是一辆车！</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

注意：React Props 是只读的！如果您尝试更改其值，则会收到错误消息。

定义和使用

传递数据

构造函数中的 Props

相关页面