码迷，mamicode.com
首页 > 其他好文 > 详细

React入门

时间：2017-05-09 12:47:28      阅读：132      评论：0      收藏：0      [点我收藏+]

标签：输出   body   封装   render   java   awesome   uil   自己的   object   

http://www.ruanyifeng.com/blog/2015/03/react.html

 
ReactDOM.render 是React的最基本的方法，用于将模板转为HTML语言，并插入制定的DOM节点中。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <scriptsrc="../build/react.js"></script>
  5. <scriptsrc="../build/react-dom.js"></script>
  6. <scriptsrc="../build/browser.min.js"></script>
  7. </head>
  8. <body>
  9. <divid="example"></div>
  10. <scripttype="text/babel"><!--React独有的JSX语法，需要的type 为text/babel 凡是使用JSX语法的 type都是这个-->
  11. ReactDOM.render(
  12. <h1>Hello, world!</h1>,
  13. document.getElementById(‘example‘)
  14. );
  15. </script>
  16. </body>
  17. </html>
 
JSX语法，html语言直接写在 javascript代码中， 不加任何引号，支持html和js的混写，
遇到html标签（以   <  开头），就以html解析，遇到代码块 （以 {  开头 ） 则以JavaScript 规格解析；
  1. <script type="text/babel">
  2. var names =[‘Alice‘,‘Emily‘,‘Kate‘];
  4. ReactDOM.render(
  5. <div>
  6. {
  7. names.map(function(name){
  8. return<div>Hello,{name}!</div>
  9. })
  10. }
  11. </div>,
  12. document.getElementById(‘example‘)
  13. );
  14. </script>
 
JSX语法允许直接在模板插入 javascript变量，如果这个变量是数组，则会展开这个数组的全部成员；
  1. <script type="text/babel">
  2. var arr =[
  3. <h1>Hello world!</h1>,
  4. <h2>React is awesome</h2>,
  5. ];
  6. ReactDOM.render(
  7. <div>{arr}</div>,
  8. document.getElementById(‘example‘)
  9. );
  10. </script>
 
 
 
组件 
React允许将代码封装成组件（component） ，然后像插入普通HTML标签一样，在网页中插入这个组件。
React.createClass 方法就是用来生成这个组件类的；
 
  1. <script type="text/babel">
  2. varHelloMessage=React.createClass({
  3. render:function(){
  4. return<h1>Hello{this.props.name}</h1>;
  5. }
  6. });
  8. ReactDOM.render(
  9. <HelloMessage name="John"/>,
  10. document.getElementById(‘example‘)
  11. );
  12. </script>
上面代码中，变量 HelloMessage 就是一个组件类， 模板插入 <HelloMessage />变回自动创建一个这样的实例，
所有组件类都有自己的render方法，用于输出组件；
组件的第一个字母必须大写，否则会报错，另外 组件类只能保安一个顶层标签（只能有一个顶层标签，然后包含很多子标签） ，否则也会报错。
 
组件的用法和原生HTML标签完全一致，可以任意的加入属性，比如 name属性，组件的属性可以在组件类的this.props 对象上获取， 但是  class 属性和for属性 在组件属性中，名称分别改为了  className  htmlFor  因为 class 和for是javascript 的保留字。
 
 
this.props.children 
this,props 对象的属性与组件一一对应 但是有一个例外 就是 this.props.children 属性，它表示组件的所有子节点 
  1. <script type="text/babel">
  2. varNotesList=React.createClass({
  3. render:function(){
  4. return(
  5. <ol>
  6. {
  7. React.Children.map(this.props.children,function(child){
  8. return<li>{child}</li>;
  9. })
  10. }
  11. </ol>
  12. );
  13. }
  14. });
  16. ReactDOM.render(
  17. <NotesList>
  18. <span>hello</span>
  19. <span>world</span>
  20. </NotesList>,
  21. document.getElementById(‘example‘)
  22. );
  23. </script>
this.props.children 的值有三种可能，如果当前组件没有子节点，他就是 undefind ，如果有一个子节点，数据类型是object 如果有多个子节点  那么它就是 array 。。。
 
React 提供了一个工具方法， React.Children 来处理 this.props.children 我们可以用 React.Children.map来遍历子节点 
不用担心 this.props.children 的数据类型了~
 
 

React入门

标签：输出   body   封装   render   java   awesome   uil   自己的   object   

原文地址：http://www.cnblogs.com/kinmos/p/6829878.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！