加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React之JSX语法

发布时间:2020-12-15 08:21:28 所属栏目:百科 来源:网络整理
导读:介绍 JSX是一种类XML语言,全程是JavaScript XML。React可以不使用JSX来编写组件,但是使用JSX可以让代码可读性更高、语义更清晰、对React元素进行抽象等 本质: 创建JSX语法的目的是为了使用基于XML的方式表达组件的嵌套,保持跟HTML一致的结构,语法除了在

介绍

JSX是一种类XML语言,全程是JavaScript XML。React可以不使用JSX来编写组件,但是使用JSX可以让代码可读性更高、语义更清晰、对React元素进行抽象等

本质:
创建JSX语法的目的是为了使用基于XML的方式表达组件的嵌套,保持跟HTML一致的结构,语法除了在描述组件比较特别之外,和普通的js没有区别。并且最终所有的JSX都会被编译为原生的js

规则

var HelloMessage = React.createClass({
        render: function() {
          return (
          {/*标签闭合*/}
            <div>
              <h2>Hello</h2> <ul> <li>hello</li> </ul> {/*自闭合*/} <input type="text"/> </div> ); } });

标签可以任意的嵌套

标签闭合

标签必须严格闭合,否则无法编译通过

JSX 组件

  1. HTML组件,HTML中的原生标签
  2. React组件,自定义组件

组件属性

和html一样,JSX中组件也有属性,传递属性的方式也相同

对于HTML组件:

function render() {
   return  <p title="title" >hello,React,world </p> }

对于React组件可以定义自定义属性,传递自定义属性的方式如下:

function render() {
    var data = {name: 'sqliang',age:23}
    return <p> <CustomComponent customProps={data}/> </p> } }

属性可以是字符串,也可以是任意的js变量,传递方式是将变量用花括号包裹

注意:
class属性要写成className;
label标签的for属性要写成htmlFor;
绑定事件的属性要写成onClick,onChange….
对于data-xxx,aria-xxx,使用中划线,其余基本上写驼骆峰格式

JSX花括号

显示文本

很多情况需要将js中的文本直接显示,做法和显示变量一样,用花括号

运算

花括号里实际上除了变量以外,可以是一段js表达式,来做简单的运算:

funtion render() {
    var text = text;
    var isTrue = false;
    var arr = [1,2,3];
    return <p> {text} {isTrue ? "true" : "false"} {arr.map(function(it) { return <span> {it} </span> })} </p> }

注释

{/*xxxxxxxx*/}

限定规则

render方法的返回值必须是有且只有一个根组件,即只能有一个闭合/自闭合根标签,或自定义组件

JSX编译方式

JSX的写法最终会编译成原生js,其编译方式有两种:

  1. 在HTML中引入babel编译器;
  2. 离线编译JSX,通过babel编译JSX;

jsx到js的转化:

var Hello = React.createClass({
    displayName: 'Hello',render: function() {
      return React.createElement("div",null,"Hello ",this.props.name);
    }
  });

  ReactDOM.render(
    React.createElement(Hello,{name: "World"}),document.getElementById('container')
  );

重点

class要写成className

数组遍历要添加key属性,否则会有error提示信息

html转JSX工具,facebook提供了html转jsx组件的功能句,可以直接复制html转为jsx组件

视频学习资源

极客学院

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读