React 2021新书104：Props入门

2023-09-29 06:21:50

React中的Props简介

React中的Props，简称为Properties，是组件之间传递数据的一种方式。在React中，组件可以被视为独立的模块，它们可以相互组合以构建更复杂的应用程序。每个组件都有自己的状态和行为，但它们也可以通过Props从其他组件接收数据。

Props可以是任何类型的数据，包括基本类型(如字符串、数字和布尔值)和复杂类型(如数组和对象)。当一个组件从另一个组件接收Props时，它可以将这些Props存储在自己的状态中，并在组件的渲染方法中使用它们。

如何使用Props

要在组件之间传递Props，您需要首先在父组件中定义它们。父组件可以是任何包含子组件的组件。在父组件中，您需要使用名为“props”的特殊属性来定义您要传递给子组件的Props。例如：

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent name="John" age={30} />
      </div>
    );
  }
}

在上面的示例中，父组件将两个Props传递给子组件：name和age。

在子组件中，您可以使用名为“props”的特殊属性来访问从父组件传递过来的Props。例如：

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <p>{this.props.age}</p>
      </div>
    );
  }
}

在上面的示例中，子组件使用this.props.name和this.props.age来访问从父组件传递过来的Props。

Props验证

在开发React应用程序时，您需要确保从父组件传递给子组件的Props是有效的。您可以使用PropTypes包来验证Props的有效性。PropTypes包提供了一组验证器，您可以使用它们来检查Props的类型、格式和范围。例如：

import PropTypes from "prop-types";

class ChildComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  };

  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <p>{this.props.age}</p>
      </div>
    );
  }
}