zoukankan      html  css  js  c++  java
  • React 组件

    基本用法封装一个hello world!的组件用到React.creactClass

    注意,

    原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

    像组件中传递参数 用:this.props来调用

    复合组件

    <div id="fuhe"></div>
    <script type="text/babel">
    /*创建组件 引用子组件里面的内容
    */
    var Box=React.createClass({
    render:function(){
    /*Box 组件使用了 Name 和 Link 组件来输出对应的信息*/
    return (
    <div>
    <Name name={this.props.name}/>
    <Link site={this.props.site}/>
    </div>
    )
    }
    })

    /* 创建子组件 */

    var Name=React.createClass({
    render:function(){
    return (
    /*引用Box name里面的值*/
    <h1 name="你好">{this.props.name}</h1>
    )
    }
    })

    var Link=React.createClass({
    render:function(){
    return (
    /* 引用Box site里面的值*/
    <a href={this.props.site}>{this.props.site}</a>
    )
    }
    })


    ReactDOM.render(
    <Box name="赵莉是女王" site="http://www.runoob.com"/>,
    document.getElementById("fuhe")
    )
    </script>

  • 相关阅读:
    NPM
    Angular2.0快速开始
    AngularJS常用插件与指令收集
    Linq 操作基础
    SQL Server2008 with(lock)用法
    SQL Server2008 MERGE指令用法
    SQL Server2008 表旋转(pivot)技术
    ef to sqlite 实际开发问题终极解决方法
    windows控件常用缩写
    SQL 查询总结
  • 原文地址:https://www.cnblogs.com/yaomengli/p/7852314.html
Copyright © 2011-2022 走看看