React 学习二 组件

react

React的一个最大的特点就是组件化的开发模式。今天就来试一下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="../src/react-0.14.3/build/react.js"></script>

<script src="../src/react-0.14.3/build/react-dom.js"></script>

<script src="../src/react-0.14.3/build/browser.min.js"></script>

</head>

<body>

<div id='header'>

</div>

<hr style="clear:both" />

<div id="body">

<div> Hi this is test page</div>

</div>

<hr />

<div id="footer"></div>

<script type="text/babel">

var JMFooter = React.createClass({

render: function() {

return (

<div className="footer">

<a href="/AboutUS.aspx">关于博客园</a>

<a href="/ContactUs.aspx">联系我们</a>

©2004-2015<a href="http://www.cnblogs.com/">博客园</a>

保留所有权利

<a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>

</div>

);

}

});

var JMHeader = React.createClass({

render: function(){

return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;

}

})

ReactDOM.render(

<JMHeader date={(new Date).toDateString()} style={"float:left"}/>,

document.getElementById('header')

);

ReactDOM.render(

<JMFooter />,

document.getElementById('footer')

);

</script>

</body>

</html>

View Code

创建两个组件Header,和Footer。 常见的网站头部和底部(这里直接复制了博客园的地步) 看效果:

有几个问题JSX语法的问题:

1. 添加css 类,<div class="footer">  是没有效果的,也不会渲染熟悉,正确的是 <div className="footer">

2. 添加style,<div style="color:red">是直接报错的,这里JSX语法不支持这样的,正确的写法是 <div style={{color:'red'}}>

3. 创建组件:React.createClass的render方法只能返回一个封装的节点,多个节点就会报错。如:return<h1></h1><h2></h2> 报错,return <div><h1></h1><h2></h2></div> 是成功的。

4. jsx不会写,没关系,用 jsx compiler 直接把html翻译过来。

以上是 React 学习二 组件 的全部内容, 来源链接: utcz.com/z/383897.html

回到顶部