React笔记_(2)_react语法1

这一节内容主要以了解为主。

渐渐的体会react的语法和其特性。

① htmlAndJs 混合编写

    react和以往的前后台书写方式不一样。

    在之前的多个语言中，讲求的是将页面代码和js代码逻辑分开，包括原来的css文件都有独立的分装。

    而react的提供了一种html和js语句混合编写的方式。这就是jsx。

    先不详说，体会一下先：

var arr = [    
    <h1>Hello world!</h1>, 
    <h2>React is awesome</h2>

];
//将html装到数组里面
ReactDOM.render( 8 <div>{arr}</div>, 9 document.getElementById('app'));

 

② props和省略号语法

    props对象的属性与组件的属性一一对应.

'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
//声明一个组件类，叫MyTitle
class MyTitle extends Component{
     show(){
        console.log(this.props.title);
        console.log(this.props.contents);
        console.log(this.props.name);
    }
    //渲染组件：一个按钮，并可以点击。
    //注意bind(this)的写法，这是jsx语法要求的
    //如果嫌麻烦也可以使用箭头函数。
     render(){
        return (<button onClick={ this.show.bind(this) }> click </button>);
    }
}
//要向组件传递的数据
var data = {title:'this is a title',contents:'this is contents'};
ReactDOM.render(
<MyTitle {...data}  name={'my name'}/>,
document.getElementById('app')
);

　　上述代码实际上渲染出来的是一个button。

     详细的说明看我的注释就好了。

③ this.props.children

    在这个属性中获取传入的dom的节点信息。

    可以用 React.Children.map方法遍历。

'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class NodeList extends Component{
    render(){
     return(
      <ul>
        {
        //遍历this.props.children节点
        React.Children.map(this.props.children,function(child){
            return (<li>{child}</li>);
            })
        }
     </ul>
    );
}
}

ReactDOM.render(
<NodeList>
    <span>hello</span>
    <span>world</span>
</NodeList>,
document.getElementById('app')
);

　　

 

参考：https://github.com/ZhangWeiStudy/React

源代码说明:点此下载