• React入门


    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'];
    3. ReactDOM.render(
    4. <div>
    5. {
    6. names.map(function(name){
    7. return<div>Hello,{name}!</div>
    8. })
    9. }
    10. </div>,
    11. document.getElementById('example')
    12. );
    13. </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. });
    7. ReactDOM.render(
    8. <HelloMessage name="John"/>,
    9. document.getElementById('example')
    10. );
    11. </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. });
    15. ReactDOM.render(
    16. <NotesList>
    17. <span>hello</span>
    18. <span>world</span>
    19. </NotesList>,
    20. document.getElementById('example')
    21. );
    22. </script>
    this.props.children 的值有三种可能,如果当前组件没有子节点,他就是 undefind ,如果有一个子节点,数据类型是object 如果有多个子节点  那么它就是 array 。。。
     
    React 提供了一个工具方法, React.Children 来处理 this.props.children 我们可以用 React.Children.map来遍历子节点 
    不用担心 this.props.children 的数据类型了~
     
     
  • 相关阅读:
    Java静态方法 与 非静态方法(实例方法)的区别
    java实现多态 方法的重写和重载的区别
    Linxu系统dpkg命令
    2016/5/23 阴天
    C#网络应用编程 类,构造函数,方法,属性和字段
    网络应用编程中的 ref
    编程经验(C#)
    Unity常用API备忘录
    Unity快捷键总结
    Unity ScriptObject创建Asset文件
  • 原文地址:https://www.cnblogs.com/kinmos/p/6829878.html
Copyright © 2020-2023  润新知