zoukankan      html  css  js  c++  java
  • React.js终探(五)

    在React中,一切都是看做组件。

    而组件的嵌套也是十分常见的。

    所以有的组件就作为容器组件

    容器组件

    React元素可以包含子元素

    1 //JSX
    2 <ezpanel title="title">
    3     <p>this is demo content</p>
    4 </ezpanel>

    在React中,用this.props.children可以访问子元素

    如:

    1 var EzPanel = React.createClass({
    2     render : function(){
    3         return     <div className="ez-panel">
    4                     {this.props.children}
    5                 </div>;
    6     }
    7 });

    这样就可以把在React.render()中写的子元素放到相应的容器中了。

    JSX可展开属性

    1 //JSX
    2 <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>

    在JSX中,有时候可能我们的React元素有很多的属性。

    JSX提供了一个比较好的特性来支持这种情况。即可设置一个JSON对象作为属性包。

    格式如: <xx {...yy}></xx>

    如:

     1 //定义属性包
     2 var props = {
     3     className : "ez-slider",
     4     onMouseDown : this.onMouseDown,
     5     onMouseUp : this.onMouseUp,
     6     onMouseMove : this.onMouseMove
     7 };
     8  
     9 //传入属性包
    10 var rel = <div {...props}></div>;

    这篇就这么多先吧

  • 相关阅读:
    15 鼠标事件
    09 属性操作
    06 DOM操作之插入节点
    03 如何处理多个库$冲突的问题
    01 jquery引入
    08 千千音乐盒实现全选和反选
    03 衣服相册切换效果
    02 显示和隐藏图片
    01 图片切换
    派生
  • 原文地址:https://www.cnblogs.com/galenyip/p/4587342.html
Copyright © 2011-2022 走看看