React组件

方法一(不传参):

创建组件:

    var HelloMessage = React.createClass({ 

         render: function() { 

             return <h1>Hello World!</h1>;

          }

    });

使用组件:

    ReactDOM.render( 

        <HelloMessage />,

        document.getElementById('example')

    );

方法二(向组件传参==>使用 this.props 对象):

创建组件:

    var HelloMessage = React.createClass({ 

         render: function() { 

             return <h1>Hello {this.props.name}</h1>;

          }

    });

使用组件:

    ReactDOM.render( 

        <HelloMessage />,

        document.getElementById('example')

    );

方法三(复合组件即多个组件组件成一个组件):

    // 组件一

    var WebSite = React.createClass({ 

        render: function() { 

            return (

                <div>

                    <Name name={this.props.name} />    // 组件二

                    <Link site={this.props.site} />   // 组件三

                </div>

            );

        }

    });

    // 组件二

    var Name = React.createClass({ 

        render: function() {

            return (

                <h1>{this.props.name}</h1

            );

        }

    });

    // 组件三

    var Link = React.createClass({

        render: function() {

            return (

                <a href={this.props.site}> {this.props.site} </a>     

            );

        }

    });

    // 输出页面

    ReactDOM.render(

        <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,

        document.getElementById('example')

    );

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 5,802评论 0 1
  • 使用 create-react-app 快速构建 React 开发环境 项目的目录结构如下: React JSX ...
    majun00阅读 3,459评论 0 0
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,846评论 1 18
  • 组件状态是什么?大多数组件只拥有属性和可渲染性。然而,它还可以提供状态这个特性,状态被用来存储组件在某段时间内状态...
    linda102阅读 5,081评论 0 1
  • 试把闲愁都酿酒,独自斟来,独自凭栏久。莫许伤心诗里绣,落花模样相思豆。 帘卷黄昏灯火又,往事阑珊,往事徐徐厚。如此...
    沧海冰心阅读 1,722评论 0 3