React入门--------顶层API

React.createClass

参数:config(object)

创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由其他不限结构的容器)或null/false(表示啥都不渲染):

 var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <div><h1>标题</h1><p>123</p></div> : null
        }
    });

    ReactDOM.render(
        <Component a="1" />, document.body
    );

注意:在该方法里面,所有的this都会在最终调用时自动的绑定到当前组件的构造器上。

React.createElement

参数:type(string/ReactClass),[props(object)],[children(ReactElement)]

创建一个指定类型的React元素,注意第三个参数children可以是任意个React元素。

 var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    ReactDOM.render(
        React.createElement(‘div‘, null,
            React.createElement( ‘p‘, null,
                React.createElement(‘span‘, null, ‘Hello,‘),
                React.createElement(‘span‘, null, ‘world,‘),
                React.createElement( Component, {a : 1})
            )
        ), document.body
    );

React.cloneElement

参数:type(ReactElement),[props(object)],[children(ReactElement)]

克隆并返回一个新的ReactElement(内部子元素也会跟着克隆),新返回的元素会保留有旧元素的props,ref,key,也会集成新的props(只要在第二个参数中有定义)

时间: 2024-10-25 14:51:30

React入门--------顶层API的相关文章

React入门--------组件API

setState 参数:nextState(object),[callback(function)] 设置nextState的某个键值.通常如果希望在某个事件或某个回调中来重新渲染组件,setState是一个最常用的触发方法,因为我们把UI内容跟state状态直接绑定在一起,一旦state发生改变并触动了绑定的逻辑,那么ui内容自然也会跟着变动: var Component1 = React.createClass({ getInitialState: function() { return {

ReactJS入门(三)—— 顶层API

本文基本跟着官方文档把API都走一遍,但会有实例来解释应该怎么用,木有比我更详细的API文档咯. React.createClass 参数:CONFIG(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null/false(表示啥都不渲染): var Component = React.createClass({ render: function() { return th

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

(转)React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非

【转】react入门实例教程

作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https://github.com/ruanyf/react-demos 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场

React入门实例教程

文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却

学习react入门demo的总结。

在github上找到react入门学习比较好的demo,下面是那个链接: https://github.com/ruanyf/react-demos 然后接下来是每个demo的学习笔记: demo1: <body> <div id="example"></div> <script type="text/jsx"> //jsx类型可html和javasript一起写,遇到 HTML 标签,就用 HTML 规则解析:遇到代

包建强的培训课程(15):React入门与提高

v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈<「『[[[〝﹙﹛﹝$(.[{£¥ !%),.:;>?]}¢¨°·ˇˉ

[译] React 入门指南

原文链接:The React Quick Start Guide 这篇文章将概括性的介绍一下如何用 ReactJS 进行开发.我将介绍一些基础知识,不会有过于深入的分析.你可以结合这些代码阅读本文.更新:本文已经由 Hugo Bessa 翻译了葡萄牙语版. 一些概念 React 的 API 非常少,简单易懂易用.在正式开始之前先介绍几个概念,一个一个来. React 元素 是表现为 HTML 元素的 JavaScript 对象,他们并不真实存在于浏览器中.他们最终表现为类似h1, div 或 s