文档章节

React Props

o
 osc_y8yehimr
发布于 2019/03/20 12:15
字数 576
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

React Props

本节介绍了 React Props。

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 state 来传递数据。

以下实例演示了如何在组件中使用 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 来获取。

默认 Props

你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:

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

State 和 Props

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "W3Cschool教程",
      site: "https://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>
    );
  }
});

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

如果 title 使用数字变量,控制台会出现以下错误信息:

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

更多验证器说明如下:

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

将PHP对象转换为关联数组 - Convert a PHP object to an associative array

问题: I'm integrating an API to my website which works with data stored in objects while my code is written using arrays. 我正在将API集成到我的网站,该网站可以使用数组编写代码时......

fyin1314
24分钟前
10
0
mysql中很多表都设计由记录创建时间和更新时间

mysql中很多表都设计由记录创建时间和更新时间 ALTER TABLE `user`MODIFY COLUMN create_time datetime NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'; ALTER TABLE `user`M......

独钓渔
36分钟前
22
0
第七章第四题(分析成绩)(Analyze scores) - 编程练习题答案

编写一个程序,读人个数不确定的考试分数,并且判断有多少个分数是大于或等于平均分,多少个分数是低于平均分的。输人一个负数表示输入的结束。假设最高分为100。 Write a program that rea...

许唯宇
43分钟前
21
0
在JavaScript控制台中包含jQuery - Include jQuery in the JavaScript Console

问题: Is there an easy way to include jQuery in the Chrome JavaScript console for sites that do not use it? 对于不使用jQuery的网站,是否有简便的方法将jQuery包含在Chrome JavaSc......

富含淀粉
54分钟前
11
0
内容发布系统开发

内容发布系统,使用PHP开发的特多,而java开发的极少,精品更是少之又少。由于cms内容发布系统,占用资源少,开发周期短。所以java开发内容系统存在几大劣势:比较笨重,占用服务器资源多(购...

Dr_啵
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部