第三章 JSX语法

原创 于 2017-05-02 14:41:22 发布 · 495 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #jsx

一、 什么是JSX?

JSX is a JavaScript syntax extension that looks similar to XML:JSX可以看作

JavaScript的拓展,看起来有点像XML。

JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。使用React，可以进行JSX语法到JavaScript的转换，可以方便地用来描述UI。下面就是一个JSX实例：const element = <h1>Hello, world!</h1>;

JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。

二、 为什么要使用JSX?

使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是

React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了，简明的代码结构更利于开发和维护。
XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。看个直接的对比：

1、使用JSX的例子：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>在React中使用JSX</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

      ReactDOM.render(

  <div>

  <div>

  <div>在React中使用JSX</div>

  </div>

  </div>,

  document.getElementById('jsx')

);

</script>

   </body>

</html>

 

 

 

2、不使用JSX的例子：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>在React中不使用JSX</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/javascript">

      ReactDOM.render(

  React.createElement('div', null,

  React.createElement('div', null,

  React.createElement('div', null, '在React中不使用JSX')

  )

  ),

  document.getElementById('jsx')

);

</script>

   </body>

</html>

除了上面的优势以外，还有如下优势：

1、JSX 执行速度更快，因为它在编译为 JavaScript 代码后,还要进行优化。

2、它是类型安全的，在编译过程中就能发现错误。

3、使用JSX编写模板更加简单快速。

三、 JSX 的基本语法规则

JSX 的基本语法规则，遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以{ 开头），就用 JavaScript 规则解析。

四、 jsx的语法

4.1 表达式

在JSX中插入JavaScript表达式比较简单，直接在JSX中将JS表达式用大括号括{}起来即可。

4.1.1 算数表达式

示范1：简单的数值运算

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         ReactDOM.render(

         <h1>

  {3*2+7}

  </h1>, document.getElementById('jsx') );

      </script>

   </body>

</html>

 

4.1.2 函数调用表达式

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         function getFullName(user){

   return user.firstName + ' ' + user.middleName+' '+user.lastName;

             }

const user = { firstName: 'William', middleName:'Jefferson',lastName:'Clinton'};

      const element = (

         <h1>

  Hello, {getFullName(user)}!

  </h1> );

  ReactDOM.render( element, document.getElementById('jsx') );

      </script>

   </body>

</html>

 

 

 

 

4.1.3 运算表达式

示范3：三目运算符

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var t=

         ReactDOM.render(

         <h1>

  {3<4?1:0}

  </h1>, document.getElementById('jsx') );

      </script>

   </body>

</html>

4.1.4属性访问表达式

示范4：属性访问

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var user={

            "name":"afeng",

            "age":16

         }

    

         ReactDOM.render(

         <div>

          <span>姓名：{user.name}</span><br />

          <span>年龄：{user.age}</span><br />

  </div>,document.getElementById('jsx') );

      </script>

   </body>

</html>

 

4.1.5逻辑表达式

！:取反

&&：取与

||：取或

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var user={

            "name":"",

            "age":16

         }

         ReactDOM.render(

         <div>

          <span>姓名：{user.name||"afeng"}</span><br />

          <span>年龄：{user.age}</span><br />

  </div>,document.getElementById('jsx') );

      </script>

   </body>

</html>

 

 

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var x=3;

        ReactDOM.render(

        <div>{x > 1 && 'You have more than one item'}</div>,

  document.getElementById('jsx')

  );

      </script>

   </body>

</html>

 

4.1.7 布尔表达式

示范六：布尔表达式

// These two are equivalent in JSX for disabling a button

<input type="button" disabled />;

<input type="button" disabled={true} />;

 

// And these two are equivalent in JSX for not disabling a button

<input type="button" />;

<input type="button" disabled={false} />;

 

4.2 语句

4.2.1 if语句

需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量（变量是一个JavaScript表达式）。如下列：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         function judgeNumber(num){

  let description;

  if (num.number % 2 == 0) {

  description = <strong>even</strong>;

  } else {

  description = <i>odd</i>;

  }

  return <div>{num.number} is an {description} number</div>;

}

  var props={

     "number":5

  }

  ReactDOM.render(

  <h1>{judgeNumber(props)}</h1>,

  document.getElementById('jsx')

  );

      </script>

   </body>

 

 4.2.2 for循环

需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量（变量是一个JavaScript表达式），JSX 允许在模板中插入数组，数组会自动展开所有成员

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的表达式</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <table id="table">

      </table>

      <script type="text/babel">

         var rows = [];

         function forDemo(numrows){

   for (var i=0; i< numrows; i++) {

      rows.push(<tr><td>{i}</td></tr>);

   }

     return <tbody>{rows}</tbody>;

   }

   ReactDOM.render(

  forDemo(3),

  document.getElementById('table')

  );

      </script>

   </body>

</html>

 

 

4.2.3 开关语句

 <!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的开关语句</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         function SwitchCaseDemo(user){

            return(

  <section>

  <h1>Color</h1>

  <p>{user.state.color || "white"}</p>

  <h1>Hex</h1>

  <p>

  {(() => {

  switch (user.state.color) {

  case "red": return "#FF0000";

  case "green": return "#00FF00";

  case "blue": return "#0000FF";

  default: return "#FFFFFF";

  }

  })()}

  </p>

  </section>

);

     }

     var user={

         "state":{

        "color":"red"

        }

     };

     ReactDOM.render(

  SwitchCaseDemo(user),

  document.getElementById('jsx')

  );

      </script>

   </body>

</html>

 

 

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>JSX中的开关语句</title>

      <script src="js/react.min.js"></script>

      <script src="js/react-dom.min.js"></script>

      <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var HelloMessage = React.createClass({

  render: function() {

  return (

  <section>

  <h1>Color</h1>

  <p>{this.props.color || "white"}</p>

  <h1>Hex</h1>

  <p>

  {(() => {

  switch (this.props.color ) {

  case "red": return "#FF0000";

  case "green": return "#00FF00";

  case "blue": return "#0000FF";

  default: return "#FFFFFF";

  }

  })()}

  </p>

 

  </section>

);

  }

});

          

     ReactDOM.render(

  <HelloMessage color="red" />,

  document.getElementById('jsx')

  );

      </script>

   </body>

</html>

 

4.3注释

注释需要写在花括号中，实例如下：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8" />

      <title>JSX中的注释</title>

  <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

   </head>

   <body>

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

      <script type="text/babel">

         var arr = [

         <h1>Hello world!</h1>,

         <h2>React is awesome</h2>,

         <h3>it is pretty!!</h3>

         ];

         ReactDOM.render(

         <div>

            <div>{arr}</div>

            {/*<div>we23</div>*/}

         </div>, document.getElementById('example')

         );

      </script>

   </body>

</html>

 

4.4数组

JSX 允许直接在模板插入JavaScript 变量。如果这个变量是一个数组,则会自动

展开这个数组的所有成员。

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8" />

      <title>JSX中的数组</title>

      <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

      <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

      <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

   </head>

   <body>

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

      <script type="text/babel">

         var arr = [

         <h1>Hello world!</h1>,

         <h2>React is awesome</h2>,

         <h3>it is pretty!!</h3>

         ];

         ReactDOM.render(

         <div>{arr}</div>, document.getElementById('example')

         );

      </script>

   </body>

</html>

 

示范2：简单数组遍历：

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(

  <div>

  {

  names.map(function (name) {

  return <div>Hello, {name}!</div>

  })

  }

  </div>,

  document.getElementById('example')

);

 

4.5样式

设置样式有三种方法:

1、在js代码中定义一个变量,然后在元素标签内部调用变量,如示范1
2、如示范2所示,直接写行内样式

3、设置标签的className,如示范3

React 推荐使用内联样式，在设置内联样式时，所有的样式属性名都是camelCase (骆驼命名法)语法来设置内联样式,比如CSS中的font-size变为fontSize。React 会在指定元素数字后自动添加px。

示范1：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>jsx中的样式</title>

   <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

ReactDOM.render(

  <h1 style = {{color:'blue',fontSize:'50'}}>jsx中的样式</h1>,

  document.getElementById('jsx')

);

      </script>

   </body>

</html>

 

示范2：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>jsx中的样式</title>

   <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

         var JSXStyle = {

  fontSize: 20,

  color: '#F00000',

  backgroundColor:'blue'

  };

ReactDOM.render(

  <h1 style = {JSXStyle}>jsx中的样式</h1>,

  document.getElementById('jsx')

);

      </script>

   </body>

</html>

 

示范3：

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，ReactDOM 使用 className 和 htmlFor 来做对应的属性。

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>jsx中的样式</title>

   <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

  <style>

     .blue{

        color: blue;

        font-size:60px;

     }

  </style>

   </head>

   <body>

      <div id="jsx"></div>

      <script type="text/babel">

ReactDOM.render(

  <h1 className="blue">jsx中的样式</h1>,

  document.getElementById('jsx')

);

      </script>

   </body>

</html>

 

4.6、分离文件
React JSX 代码也可以放在一个独立文件上，再引入该文件即可。

1、先写JS文件,并命名为hello.js

  ReactDOM.render(

  <h1>Welcome to React world!</h1>,

  document.getElementById('hello')

  );

2、引入该文件，注意type="text/babel”

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title></title>

   <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

  <script type="text/babel" src="hello.js" ></script>

   </head>

   <body>

       <div id="hello"></div>

   </body>

</html>

 

4.7、HTML 标签 和 React 组件

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名，比如

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>jsx渲染HTMl标签</title>

    <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

  <style>

     .h{

        color: red;

        background-color:yellow ;

        font-size: 20px;

     }

  </style>

   </head>

   <body>

         <div id="hello"></div>

      <script type="text/babel">

         var myDiv= <div className='h'>this is a div tag！</div>;

         ReactDOM.render(myDiv,document.getElementById("hello"));   

      </script>

   </body>

</html>

要渲染 React 组件，只需创建一个大写字母开头的本地变量。比如：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title>jsx渲染组件</title>

    <script src="js/react.min.js"></script>

  <script src="js/react-dom.min.js"></script>

  <script src="js/browser.min.js"></script>

   </head>

   <body>

         <div id="hello"></div>

      <script type="text/babel">

   var HelloMessage = React.createClass({

  render: function() {

  return <h1>Hello {this.props.name}</h1>;

  }

});

ReactDOM.render(

  <HelloMessage name="John"/>,

  document.getElementById('hello')

);      

      </script>

   </body>

</html>

       

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值