réagir Props

La principale différence entre l'état et les accessoires desaccessoires qui sont immuables, alors que l' état peut interagir avec l'utilisateur de changer.Ceci est la raison pour laquelle certains composants de conteneurs doivent définir l'état de mettre à jour et modifier les données. Le sous-ensemble ne peut transmettre des données à travers des accessoires.

Utilisez Props

L'exemple suivant montre comment utiliser des accessoires dans l'assemblée:

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

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

Essayez »

This.props.name nom d'instance attribut pour passer à travers.

Props par défaut

Vous pouvez définir les valeurs par défaut pour les accessoires par getDefaultProps () méthode, des exemples sont les suivants:

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

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

Essayez »

Etat et Props

L'exemple suivant montre comment utiliser une combinaison de l'état et des accessoires dans l'application. Nous pouvons mettre en place l'Etat dans l'ensemble de parent, et par l'utilisation d'accessoires dans le sous-ensemble à être transféré au sous-ensemble. Dans la fonction de rendu, nous avons mis le nom et le site pour obtenir le composant parent passe sur les données.

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "本教程",
      site: "http://www.w3big.com"
    };
  },
 
  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')
);

Essayez »

vérification des Props

Props authentification utilisepropTypes, il peut faire en sorte que nos composants d'application sont utilisés correctement, React.PropTypes offre de nombreux validateur (validateur) pour valider les données entrant est valide.Lorsque les accessoires invalides données entrantes, Console JavaScript lancera un avertissement.

L'exemple suivant crée un composant monTitre, titre de propriété est un must et est une chaîne, un nombre sera donnée si elle est:

var title = "本教程";
// 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')
);

Essayez »

Si le titre en utilisant les variables numériques, consoler le message d'erreur suivant:

Plus validateur comme suit:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
   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)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    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!');
      }
    }
  },
  /* ... */
});