本節(jié)介紹了 React Props。

state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。

這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 state 來傳遞數(shù)據(jù)。

使用 Props

以下實例演示了如何在組件中使用 props：

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="W3Cschool"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

嘗試一下 ?

實例中 name 屬性通過 this.props.name 來獲取。

默認 Props

你可以通過 getDefaultProps() 方法為 props 設(shè)置默認值，實例如下：

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'W3Cschool'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

嘗試一下 ?

State 和 Props

以下實例演示了如何在應(yīng)用中組合使用 state 和 props 。

我們可以在父組件中設(shè)置 state， 并通過在子組件上使用 props 將其傳遞到子組件上。

在 render 函數(shù)中, 我們設(shè)置 name 和 site 來獲取父組件傳遞過來的數(shù)據(jù)。

class WebSite extends React.Component {
constructor() {
    super();
    this.state = {
        name: "編程獅",
        site: "http://www.o2fo.com"
    }
}
render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}

class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

嘗試一下 ?

Props 驗證

React.PropTypes 在 React v15.5 版本后已經(jīng)移到了 prop-types 庫。 

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js" rel="external nofollow" ></script>

Props 驗證使用 propTypes，它可以保證我們的應(yīng)用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據(jù)是否有效。

當向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告。

以下實例創(chuàng)建一個 Mytitle 組件，屬性 title 是必須的且是字符串，非字符串類型會自動轉(zhuǎn)換為字符串：

var title = "W3Cschool教程";
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

嘗試一下 ?


更多驗證器說明如下：

MyComponent.propTypes = {
    // 可以聲明 prop 為指定的 JS 基本數(shù)據(jù)類型，默認情況，這些數(shù)據(jù)是可選的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的對象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符聲明 prop 為類的實例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多個對象類型中的一個
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定類型組成的數(shù)組
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定類型的屬性構(gòu)成的對象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 參數(shù)的對象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意類型加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意類型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定義驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}