react入门笔记（二）demo实例学习

发表于   |   分类于   |     |   阅读次数

之前浏览过并理解完了react的一些基础知识后，本文将开始一边写 demo 一边继续 react 的学习之旅。

react官网地址：React: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

本文中的代码 github 地址：demo实例

demo的html模板

本文中所有的 demo ，都采用以下这个 html 模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react demo</title>
  <script src="../build/react.min.js"></script>
  <script src="../build/react-dom.min.js"></script>
  <script src="../build/browser.min.js"></script>
  <script src="index.js" type="text/babel"></script>  <!--引入的jsx文件-->
</head>
<body>
<div id="jc"></div>
<!-- <script type="text/babel">
  //jsx代码
</script> -->
</body>
</html>

demo2: 数组变量

如代码，当变量 arrHtml 是一个数组的时候，jsx 会自动遍历展开整个数组：

1
2
3
4
5
6
7
8
render:function(){
 var arrHtml = [
   <h1>Hello haha!h1</h1>,
   <h2>Hello haha!h2</h2>,
   <h3>Hello haha!h3</h3>
 ];
 return <div>{arrHtml}</div>;    //注意外层要单一的节点，用div包裹一下
}

React.createClass 方法生成一个组件类 ArrHtml；模板插入 <ArrHtml/> 时，会自动生成 ArrHtml 的一个实例；最后 render 出来的 html 结构如下：

1
2
3
4
5
<div data-reactroot="">
    <h1>Hello haha!h1</h1>
    <h2>Hello haha!h2</h2>
    <h3>Hello haha!h3</h3>
</div>

demo3: props props.children

this.props：实例元素的属性集合；
this.props.children：组件实例的所有子节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var ListHtml = React.createClass({
  render:function(){
    return (
      <div>
        <p>my name is {this.props.name}</p>
        <ul>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
        </ul>
      </div>
    );
  }
});
ReactDOM.render(
  <ListHtml name='guojc'>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
  </ListHtml>,
  document.getElementById('jc')
);

刚开始，一些知识小点，尽管学过知道，实践时总会踩踩小坑：
return:直接换行，相当于加了分号;，导致后续代码报错；要么不换行、要么括号包裹一下 return ();。
jsx语法，js一定要放在 {} 里面。
ListHtml的开头字母没有大写，标签直接是listHtml了，组件类完全失效。

demo4: getDefaultProps

getDefaultProps：设置组件属性的默认值；优先级：自定义 > 默认的，无自定义的则取默认的。
在 demo4 的代码里，可以随意删除 id\title属性的设置，看看效果：<Title id='new-title' title='new title!' />：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Title = React.createClass({
  getDefaultProps: function(){
    return{
      title: 'default title!',
      id: 'default-title'
    };
  },
  render: function(){
    return <h1 id={this.props.id}>{this.props.title}</h1>;
  }
});
ReactDOM.render(
  <Title id='new-title' title='new title!' />,
  document.getElementById('jc')
);
//document.getElementById('default-title').style.color='red';
document.getElementById('new-title').style.color='green';

demo5: ref ReactDOM.findDOMNode

this.refs.[refName] 属性获取的是真实 DOM；
首先需要设置 React 元素的 ref 属性，然后通过 this.refs 对象访问这个组件。
注意，旧版本的是React.findDOMNode()，新版本应该用ReactDOM.findDOMNode()，否则报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var MyForm = React.createClass({
   focusClick: function(){
     //this.refs.focusInput.focus();
     //this.refs.focusInput.value = '点击后生成的值';
     //React.findDOMNode(this.refs.focusInput).focus(); //is not a function...
       ReactDOM.findDOMNode(this.refs.focusInput).focus();
       ReactDOM.findDOMNode(this.refs.focusInput).value = '点击后生成的值';
   },
   render: function(){
     return (
       <div>
         <input type='text' ref='focusInput'/>
         <a onClick={this.focusClick}>点击focus</a>
       </div>
     );
   }
 });
 ReactDOM.render(
   <MyForm />,
   document.getElementById('jc')
 );

更多学习demo，待续…

本文中的代码 github 地址：demo实例