【JAVASCRIPT】React学习-JSX 语法

摘要

react 学习包括几个部分：

  • 文本渲染
  • JSX 语法
  • 组件化思想
  • 数据流

JSX 语法

1. 定义

JSX 是javascript + xml 的合集，我们可以将javascript 与 html 一起编写， 封装页面组件的html 格式与业务逻辑。但使用 JSX 时，一定要编写成能精确定义和反应组件及属性的树状结构，避免无法解析，虽然目前还没遇到过无法解析的情形。

2. 如何区分javascript 与 xml

JSX 代码中 以 {} 包含的为 javascript 代码， <> 包含的为 html 代码，解析时采用对应的语法解析器

3. React 模块

约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。

  1. html 标签，JSX 中以小写字母开头
  2. react 组件，JSX 中以大写字母开头
<body>
    <div id="HelloWorld"></div>
    <div id="HelloWorld1"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var hw = <div>hello,world</div>;
    var HelloWorld = React.createClass({
        clickHandler: function() {
            console.log(this.props);
            console.log('yes, click event has been fired!');
        },
        render: function() {
            return (
                <p onClick={this.clickHandler}>
                    你好，{this.props.name}, 欢迎大驾光临！
                </p>
            );
        }
    });

    React.render(
        <HelloWorld name={'huxiaoyun'} />,
        document.getElementById('HelloWorld')
    );

    React.render(
        hw,
        document.getElementById('HelloWorld1')
    );
</script>

4. html 属性

自定义属性采用data 开头， 比如 data-index 表示此dom 节点的序列号

5. 注意点

  • 前面的代码都用了JSXTransformer.js，发布时一定要提前编译为javascript，可安装 react-tools 进行转化，自动化工具也可使用gulp 对应的插件gulp-react

  • JSX 其实是一种语法糖，它将JSX 代码翻译成javascript，某些情况无法实现，如下面

<body>
    <div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var a = true;
    // 不正确写法，暂不知道原因
    // var helloWorld = <div id=if (a) { 'success'} else { 'fail'}>hehehe</div>;
    // var helloWorld = <div>{if (a) <div id='success'>Hello World!</div> else <div>Hello World!</div>}</div>;
    // 正确写法
    var helloWorld = <div>{a ? <div id='success'>Hello World!</div> : <div>Hello World!</div>}</div>;
    React.render(
        helloWorld,
        document.getElementById('HelloWorld')
    );
</script>

  • 不支持某些html 属性，如 class for , JSX 中替换为 className htmlFor

  • JSX 大小写敏感
    比如 onClick 如果写成 onclick 是无法触发事件的

<body>
    <div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        clickHandler: function() {
            console.log(this.props);
            console.log('yes, click event has been fired!');
        },
        render: function() {
            return (
                <p onClick={this.clickHandler}>
                    你好，{this.props.name}, 欢迎大驾光临！
                </p>
            );
        }
    });

    React.render(
        <HelloWorld name={'huxiaoyun'} />,
        document.getElementById('HelloWorld')
    );
</script>
  • 行内样式时不能采用引号的书写方式，正确方式如下
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>行内样式</title>
    <style type="text/css">
        .big {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        render: function() {
            return (
                <p style={{color:'red'}} className="big">
                    你好，{this.props.name}, 欢迎大驾光临！
                </p>
            );
        }
    });

    React.render(
        <HelloWorld name={'huxiaoyun'} />,
        document.getElementById('HelloWorld')
    );
</script>
  • html 格式文本展示，举个例子：
<body>
    <div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        render: function() {
            return (
                <p>
                    你好，{this.props.name}, 欢迎大驾光临！
                </p>
            );
        }
    });
    // 转义
    // var content = <div>huxiaoyun</div>;
    // 不转义，作字符串输出
    var content = '<div>huxiaoyun</div>';
    React.render(
        <HelloWorld name={content} />,
        document.getElementById('HelloWorld')
    );
</script>
posted @ 2015-09-05 18:55  空城夕  阅读(766)  评论(0)  编辑  收藏  举报