网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavaScript的React框架中的JSX语法学习入门教程
内容
    这篇文章主要介绍了JavaScript的React框架中的JSX语法学习入门教程,React是由Facebook开发并开源的高人气js框架,需要的朋友可以参考下
    什么是JSX？
    在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。
    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    React.render(myElement, document.body);
    一个XML标签，比如<MyComponent someProperty={true} />会被JSX转换工具转换成什么呢？
    比如：
    var Nav = React.createClass({/*...*/});
    var app = <Nav color="blue"><Profile>click</Profile></Nav>;
    会被转化为：
    var Nav = React.createClass({/*...*/});
    var app = React.createElement(
     Nav,
     {color:"blue"},
     React.createElement(Profile, null, "click")
    );
    那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。
    ReactElement createElement(
     string/ReactClass type,
     [object props],
     [children ...]
    )
    这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
    JSX转化器
    要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type="text/jsx"，并引入JSXTransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：
    npm install -g react-tools
    并使用命令行工具转化即可（具体用法可以参考jsx -h）：
    jsx src/ build/
    如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。
    HTML模板中使用JS
    在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。
    var names = ['Alice', 'Emily', 'Kate']; 
    React.render( 
    <div> 
    { 
    names.map(function (name) { 
    return <div>Hello, {name}!</div> 
    }) 
    } 
    </div>, 
    document.getElementById('example') 
    ); 
    编译出来就变成了这样：
    var names = ['Alice', 'Emily', 'Kate']; 
    React.render( 
     React.createElement("div", null, names.map(function (name) { 
     return React.createElement("div", null, "Hello, ", name, "!") 
     }) ), 
     document.getElementById('example') 
    ); 
    要注意的是，大括号实际就是一个变量输出表达式，JSX最终就是直接把花括号中的内容作为 React.createElement 的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，那么你这样写就是错的：
    React.render( 
    <div> 
    { 
    var a = 1; 
    names.map(function (name) { 
    return <div>Hello, {name}!</div> 
    }) 
    } 
    </div>, 
    document.getElementById('example') 
    ); 
    因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。
    这么写也是错的：
    React.render( 
    <div> 
    { 
    var a = 1; 
    } 
    </div>, 
    document.getElementById('example') 
    ); 
    因为 React.createElement(“div”, null, var a = 1;) 是语法错误。
    那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。
    需要注意的是，如果你在属性中输出JS变量，是不能加引号的，不然会被当做字符串而不被解析。
    应该是这样：
    <a title={title}>链接</a>
    使用HTML标签
    要创建一个HTML标准中存在的元素，直接像写HTML代码一样即可：
    var myDivElement = <div className="foo" />;
    React.render(myDivElement, document.body);
    不过需要注意的是class和for这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用className和htmlFor。
    还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。
    <div data-custom-attribute="foo" />
    命名空间式组件
    比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
    var Form = MyFormComponent;
    var App = (
     <Form>
     <Form.Row>
      <Form.Label />
      <Form.Input />
     </Form.Row>
     </Form>
    );
    这样你只需将子组件的ReactClass作为其父组件的属性：
    var MyFormComponent = React.createClass({ ... });
    MyFormComponent.Row = React.createClass({ ... });
    MyFormComponent.Label = React.createClass({ ... });
    MyFormComponent.Input = React.createClass({ ... });
    而创建子元素可以直接交给JSX转化器：
    var App = (
     React.createElement(Form, null,
      React.createElement(Form.Row, null,
       React.createElement(Form.Label, null),
       React.createElement(Form.Input, null)
      )
     )
    );
    该功能需要0.11及以上版本
    Javascript表达式
    在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：
    // Input (JSX):
    var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    // Output (JS):
    var content = React.createElement(
     Container,
     null,
     window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    );
    不过要注意的是，JSX语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：
    // This JSX:
    <div id={if (condition) { 'msg' }}>Hello World!</div>
    // Is transformed to this JS:
    React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
    可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
    if (condition) <div id='msg'>Hello World!</div>
    else <div>Hello World!</div>
    传播属性（Spread Attributes）
    在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。
    var props = { foo: x, bar: y };
    var component = <Component { ...props } />;
    这样就相当于：
    var component = <Component foo={x} bar={y} />
    它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
    var props = { foo: 'default' };
    var component = <Component {...props} foo={'override'} />;
    console.log(component.props.foo); // 'override'
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 14:39:04