React 初学 - props属性 - 个人笔记11

在 React 中，你可以将属性传递给子组件。假设你有一个App组件，该组件渲染了一个名为Welcome的子组件，它是一个无状态函数组件。你可以通过以下方式给Welcome传递一个user属性：

<App>
  <Welcome user='Mark' />
</App>

使用自定义 HTML 属性，React 支持将属性user传递给组件Welcome。由于Welcome是一个无状态函数组件，它可以像这样访问该值：

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

调用props这个值是常见做法，当处理无状态函数组件时，你基本上可以将其视为返回 JSX 的函数的参数。这样，你就可以在函数体中访问该值。但对于类组件，访问方式会略有不同。

案例1：

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: {props.date}</p>
      { /* change code above this line */ }
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        { /* change code below this line */ }
        <CurrentDate date={Date()}/>
        { /* change code above this line */ }
      </div>
    );
  }
};

案例2：

const List= (props) => {
  { /* change code below this line */ }
  return <p>{props.tasks.join(", ")}</p>
  { /* change code above this line */ }
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        { /* change code below this line */ }
        <List tasks={['t1','t2']}/>
        <h2>Tomorrow</h2>
        <List tasks={['t1','t2','t3']}/>
        { /* change code above this line */ }
      </div>
    );
  }
};

拓展

React 还有一个设置默认 props 的选项。你可以将默认 props 作为组件本身的属性分配给组件，React 会在必要时分配默认 prop。如果没有显式的提供任何值，这允许你指定 prop 值应该是什么。

const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};
// change code below this line
ShoppingCart.defaultProps = { items: 0 }

React：覆盖默认的 Props

案例1

const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}

Items.defaultProps = {
  quantity: 0
}

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    { /* change code below this line */ }
    return <Items quantity={10}/>
    { /* change code above this line */ }
  }
};

React：使用 PropTypes 来定义你期望的 Props

React 提供了有用的类型检查特性，以验证组件是否接收了正确类型的 props。例如，你的应用程序调用 API 来检索你希望在数组中的数据，然后将数据作为 prop 传递给组件。你可以在组件上设置propTypes，以要求数据的类型为array。当数据是任何其他类型时，都会抛出警告。

当你提前知道 prop 的类型时，最好的做法是设置propTypes。可以为组件定义propTypes属性，方法与定义defaultProps相同。这样做将检查给定键的 prop 是否是给定类型。这里有一个示例，名为handleClick的 prop 应为function类型：

MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }

在上面的示例中，PropTypes.func部分检查handleClick是否为函数。添加isRequired是为了告诉 ReacthandleClick是该组件的必需属性。如果未提供该 prop，你将看到警告信息。另请注意，func表示function。在 7 种 JavaScript 基本类型中，function和boolean（写为bool）是仅有的使用异常拼写的两种类型。除了基本类型，还有其他类型可用。例如，你可以检查 prop 是否为 React 组件，请参阅文档以获取所有选项。

注意：在 React v15.5.0 版本中, PropTypes可以从 React 中单独引入，如下所示：

import React, { PropTypes } from 'react';

案例1

const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

// change code below this line
Items.propTypes = { quantity:PropTypes.number.isRequired  }
// change code above this line

Items.defaultProps = {
  quantity: 0
};

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items />
  }
};

---

前几个案例涵盖了将 props 传递给子组件的基本方法。但是，倘若接收 prop 的子组件不是无状态函数组件，而是一个 ES6 类组件又当如何呢？ES6 类组件访问 props 的方法略有不同。

案例1：

class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            { /* change code below this line */ }
            <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
            { /* change code above this line */ }
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reset Password</h2>
          <h3>We've generated a new temporary password for you.</h3>
          <h3>Please reset this password from your account settings ASAP.</h3>
          { /* change code below this line */ }
          <ReturnTempPassword tempPassword='12345678' />
          { /* change code above this line */ }
        </div>
    );
  }
};

案例2
在代码编辑器中有一个CampSite组件，它把Camper组件渲染为自己的子组件。定义Camper组件，并为其分配默认 props{ name: ‘CamperBot’ }。你可以在Camper组件内部渲染任何你想要的代码，但是要确保有一个p元素，它只包含作为prop传递的name值。最后，在Camper组件上定义propTypes，要求提供name作为 prop，并验证它是string类型。

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// change code below this line
Camper.defaultProps = {
  name: "CamperBot"
};

Camper.propTypes = {
  name: PropTypes.string.isRequired
};
function Camper (props) {
  return (
    <p>{props.name}</p>
  )
}