zoukankan      html  css  js  c++  java
  • 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 的数据类型了~
     
     
  • 相关阅读:
    C# Winform 国际化
    Could not find method google() for arguments [] on repository container,rn 集成react-native-camera 出现此错误的解决方法
    RN集成echarts4图表组件react-native-secharts(转载)
    DataGridView设置行高
    react native原生模块引用本地jar包
    react-native-printer
    phpstudy连接SQL Server 2008数据库 以及 php使用sql server出现乱码解决方式
    Apache崩掉:为进程配置合适的线程数
    引用静态资源时加上时间戳,处理浏览器缓存问题
    利用存储过程优化复杂的数据库操作
  • 原文地址:https://www.cnblogs.com/kinmos/p/6829878.html
Copyright © 2011-2022 走看看