reaccionar Puntales

La principal diferencia entre el estado y los apoyos delos apoyos que son inmutables, mientras que el estado puede interactuar con el usuario para cambiar.Por eso, algunos componentes de contenedor necesitan para definir el estado de actualizar y modificar los datos. El subconjunto sólo puede pasar datos a través de los apoyos.

utilizar accesorios

El siguiente ejemplo muestra cómo utilizar los apoyos en la asamblea:

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

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

Trate »

This.props.name atributo de nombre de instancia para pasar.

apoyos por defecto

Puede configurar los valores por defecto de los puntales de getDefaultProps () método, los ejemplos son los siguientes:

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

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

Trate »

Estado y Puntales

El siguiente ejemplo muestra cómo utilizar una combinación de estado y apoyos en la aplicación. Podemos establecer el estado en el ensamblaje padre, y mediante el uso de accesorios en el subconjunto que se transferirán a la sub-ensamblaje. En la función de render, nos fijamos el nombre y sitio para obtener el componente de los padres pasa por encima de los datos.

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')
);

Trate »

verificación de los apoyos

Puntales de autenticación utilizapropTypes, se puede asegurar que nuestros componentes de aplicación se utilizan correctamente, React.PropTypes ofrece muchas validador (validador) para validar los datos de entrada es válida.Cuando los apoyos no válidos los datos de entrada, la consola de JavaScript lanzará una advertencia.

En el siguiente ejemplo se crea un componente myTitle, título de propiedad es una necesidad y es una cadena, se le dará un número si es:

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')
);

Trate »

Si el título utilizando las variables numéricas, consolar el mensaje de error siguiente:

Más validador como sigue:

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!');
      }
    }
  },
  /* ... */
});