React学习笔记2

React是组件式开发,开发组件然后渲染出来.

创建组件一个名为WebName的组件

var WebName = React.createClass({
     render:function(){
          return <h1>我是h1内容</h1>
      }
})

2018-1-22 补充

React.createClass已被废弃,使用ES6的class或者使用npm安装create-react-class
ES6 Class代码写法:

class WebName extends React.Component{
    render(){
          return <h1>我是h1内容</h1>
      }
}

npm 安装create-react-class写法:
npm先安装:npm install --save create-react-class

const createClass = require('create-react-class');
let WebName = createClass({
    render:function(){
          return <h1>我是h1内容</h1>
      }
})

渲染到HTML页面,获取到某个节点ID然后将WebName渲染到那个节点下

ReactDOM.render(
      <WebName/>,
      document.getElementById("ElementID")
);

复合组件

组合组件,创建多个组件然后合成一个组件

先创建WebName组件

ReactDOM.render(
<WebName/>,
document.getElementById("ElementID")
);

在创建WebLink组件

var WebName = React.createClass({
     render:function(){
          return <a href="https://www.eorig.cc">https://eorig.cc</a>
      }
});

调用WebName和WebLink,将两个组件和并到一个WebShow组件

var WebShow = React.createClass({
       render:function(){
              return(
                <div>
                    <WebName/>
                    <WebLink/>
                <div>
             )
      }
});

将WebShow渲染到节点ID下面

ReactDom.render(
      <WebShow/>,
      document.getElementId("ElementID")
);
分享 二维码
分类:代码笔记
还没有评论


在此输入评论..
0/100