1.因为jsx将两个花括号之间的内容渲染为动态值，只需要引用对应的变量即可

<!DOCTYPE html>

<html>

    <head>

        <title>React JS</title>

        <script src="../build_0.13/react.js"></script>

        <script src="../build_0.13/JSXTransformer.js"></script>

    </head>

    <body>

        <div id="example"> </div>

        <script type="text/jsx">

            var h1 = "question";

            var Divider = React.createClass({

                    render:function(){

                        return (<div className="divider">

                                    <h1>{h1}</h1>

                                </div>

                                );

                    }

                });

            //将组件加到对应的元素上

            React.render( <Divider />, document.getElementById('example') );

        </script>

    </body>

</html>

React(0.13) 定义一个动态的组件的更多相关文章

  1. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. React(0.13) 定义一个动态的组件(注释，样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  3. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  4. React(0.13) 定义一个checked组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  5. React(0.13) 定义一个多选的组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. React(0.13) 定义一个input组件，使其输入的值转为大写

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  7. React(0.13) 定义一个使用动画

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. React自己写的一个地图小组件

    由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...

随机推荐

  1. jssor/slider图片的问题

    用jssor/slider这个控件,在显示图片的时候,每张图片都被拉伸到最大的图片的宽度和高度,导致变形,怎么处理? [答案] Yes. With no u="image" ima ...

  2. Android 原生 Android ActionBar Tab （滑动）导航

    本文内容 环境 项目结构 演示一:ActionBar Tab 导航 演示二:ActionBar Tab 带滑动导航 本文演示 Tab 导航.第一个演示,是基本的 Tab 导航,第二个是带滑动的 Tab ...

  3. Android LazyList 从网络获取图片并缓存

    原演示地址 本文内容 环境 演示 LazyList 从网络获取图片并缓存 参考资料 本文是 Github 上的一个演示,通过网络获取歌手专辑的缩略图,并显示在 ListView 控件中.该演示具备将缩 ...

  4. OSX下安装VMware虚拟机， 加载kali系统

    准备 当前环境:OSX 10.11.6 , 准备VMware虚拟机软件和kali系统 为什么要安装kali系统 Kali Linux预装了许多渗透测试软件,包括nmap (端口扫描器).Wiresha ...

  5. 用javascript请求动态页url返回更新

    例如我们用Ajax请求一个动态页返回的信息,或一个图片验证码请求一个*.ashx页面,第一次请求没问题,而第二次请求时,不变化,为啥? 因为第二次及以后请求的url与第一次是一样的,所以服务器(或是浏 ...

  6. javascript基于原型的语言的特点

    一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  “原型对象”是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己 ...

  7. dom4j解析以及生成xml字符串测试

    public static void main(String[] args) { String xmlStr = "<ybjcVo>"+ "<zbGri ...

  8. spring mvc mongoDb

    http://www.cnblogs.com/dennisit/p/3372568.html 系统环境: 操作系统:  windows xp 数 据 库:  mongodb2.0.6 驱 动 包: S ...

  9. 递归的隐含限制——处理对象小的可以、大的不可以

    最近自己编写了一个求n阶行列式的值的C程序,编译成功,并且使用了一个3阶行列式进行了测试,测试也成功了.以为这样就万事大吉了,可是后来在实际应用中调用该函数时却导致程序无法运行.注意到,实际应用中要求 ...

  10. Five Steps to Avoiding Java Heap Space Errors

    来自:https://www.mapr.com/blog/how-to-avoid-java-heap-space-errors-understanding-and-managing-task-att ...