react语法(1)

发表于 | 分类于

react网页模板如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上面代码有两个地方需要注意，最后一个script标签的type为text/babel属性，这是因为react独有的jsx的语法，跟js不兼容，凡是使用jsx的地方，都要加上 type=”text/babel” 。
其次。共调用了3个库，react.js,react-dom.js 和 Browser.js,必须首先加载，react.js是react的核心库，react-dom.js提供与dom相关的操作，browser.js的作用是将jsx的语法转化成js语法。

reactDOM.render作用。

reactDOM.render是react的最基本使用方法。将模板转化为HTML语言。并插入指定的 DOM 节点。如下：

1
2
3
4
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

运行结果如下：
>

JSX语法

HTML的语言直接写在js中，不加任何引号，这就是jsx的语法，允许html和js相互混合着写。

1
2
3
4
5
6
7
8
9
10
11
12
var names = ['Alice', 'Emily', 'Kate'];

    ReactDOM.render(
      <div>
      {
        names.map(function (name, index) {
          return <div key={index}>Hello, {name}!</div>
        })
      }
      </div>,
      document.getElementById('example')
    );

JSX语法的基本规则，遇到html标签<开头，就以html的规则解析，遇到代码块{开头，就以js规则解析。
JSX允许在模板总插入js变量，如果这个变量是一个数组，则会展开这个数组中的所有成员。

1
2
3
4
5
6
7
  var arr = [
    <h1>hello</h1>
];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
)

组件

react中最重要的部分便是组件，像普通插入html标签一样，在网页中插入这个组件。react.createClass方法用于生成一个组件类。
现在采用了es6的语法，继承react的Component类，创建一个新类。即新组件，随后使用这个组件。name属性由父组件传进，子组件可使用。

1
2
3
4
5
6
7
8
9
 class HelloMessage extends React.Component{
    render(){
        return <div>hello {this.props.name}</div>
    }
}
ReactDOM.render(
    <HelloMessage name = "ckq"/>,
    document.getElementById('example')
);

需要注意的是，组件类的第一个字母必须大写，否则会报错，例如helloMessage便会报错。另外组件类中只能包含一个顶层标签，否则也会报错。此时这种情况可以在顶部加一个div将其余的元素包裹在其中即可。
组件的属性可以在组件类的this.props对象上获取，比如name属性就可以从this.props.name上读取。

this.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
class NoteList extends React.Component{
    render(){
        return (
            <ol>
                {
             React.Children.map(this.props.children,function (child) {
                 return <li>{child}</li>
             })
            }
            </ol>
        )
    }
}
ReactDOM.render(
    <NoteList>
        <span>ckq</span>
        <span>cpp</span>
    </NoteList>,
    document.getElementById('example')
)

上面代码的notelist组件有两个span子节点，它们可以通过this.props.children读取。
this.props.children的值有3中可能，如果当前没有子节点，就是undefined,如果有一个子节点，数据类型就是object,如果有多个子节点，就是array. react中的react.children来处理this.props.children,可以用react.children.map来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

PropTypes

组件的属性可以接受任意值，字符串，对象，函数等等都可以，有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
需要增加引入prop-types.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var data = 123;
class MyTitle extends React.Component{
    static propTypes = {
        title: PropTypes.string.isRequired,
    }

    render() {
        return (
            <div>
                {this.props.title}
            </div>
        );
    }
};
ReactDOM.render(
 <MyTitle title={data}/>,
    document.getElementById('example')
)

上面代码表示,myTitle组件有一个title属性，propTypes告诉react,这个title属性是必须的，而且它的值必须是字符串，我们传过去的title是一个数值，这样，就会报错。