欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
React 入门实例教程
2017-10-25 17:20:34   来源:网络 阮一峰   评论:0 点击:

  注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。


var HelloMessage = React.createClass({
  render: function() {
    return 

Hello {this.props.name}

some text

; } });

  上面代码会报错,因为HelloMessage组件包含了两个顶层标签:h1和p。

  组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 ,就是 HelloMessage 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

  添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

 五、this.props.children

  this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点(查看 demo05)。


var NotesList = React.createClass({
  render: function() {
    return (
      
    { React.Children.map(this.props.children, function (child) { return
  1. {child}
  2. ; }) }
); } }); ReactDOM.render( hello world , document.body );

  上面代码的 NoteList 组件有两个 span 子节点,它们都可以通过 this.props.children 读取,运行结果如下。

  这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

  React 提供一个工具方法 React.Children 来处理 this.props.children

相关热词搜索:实例 教程

上一篇:JavaScript原型详解
下一篇:学JavaScript是什么样的体验?

收藏