React Props

state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 state 來傳遞數(shù)據(jù)。

使用 Props

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

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="W3CSchool" />,
  document.getElementById('example')
);

嘗試一下 ?

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

默認(rèn) Props

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

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'W3CSchool'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

嘗試一下 ?

State 和 Props

以下實例演示了如何在應(yīng)用中組合使用 state 和 props 。我們可以在父組件中設(shè)置 state， 并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數(shù)中, 我們設(shè)置 name 和 site 來獲取父組件傳遞過來的數(shù)據(jù)。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "W3Cschool教程",
      site: "http://www.w3cschool.cn"
    };
  },
 
  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

React.render(
  <WebSite />,
  document.getElementById('example')
);

嘗試一下 ?

Props 驗證

Props 驗證使用 propTypes，它可以保證我們的應(yīng)用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據(jù)是否有效。當(dāng)向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告。

以下實例創(chuàng)建一個 Mytitle 組件，屬性 title 是必須的且是字符串，如果是一個數(shù)字則會報錯 ：

var title = "W3Cschool教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

嘗試一下 ?

如果 title 使用數(shù)字變量，控制臺會出現(xiàn)以下錯誤信息：

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多驗證器說明如下：

React.createClass({
  propTypes: {
    // 可以聲明 prop 為指定的 JS 基本數(shù)據(jù)類型，默認(rèn)情況，這些數(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!');
      }
    }
  },
  /* ... */
});