前端之React实战-JSX介绍与使用

JSX

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。

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

React.render(
  

  {
    names.map(function (name) {
      return 
Hello, {name}!
    })
  }
  
,
  document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员:

var arr = [
  
Hello world!
,
  
React is awesome
,
];
React.render(
  
{arr}
,
  document.getElementById('example')
);

Transfer

JSX编译器的核心是将基于XML的语言编译成JS代码，主要是依赖于React.createElment函数。

var Nav;
// Input (JSX):
var app = 
;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

var Nav, Profile;
// Input (JSX):
var app = 
click
;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JavaScript Expressions

属性表达式

如果需要在HTML中混入JavaScript变量值，需要利用{}来代替""。

// Input (JSX):
var person = ;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

Boolean Attributes

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

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

Child Expressions

// Input (JSX):
var content = {window.isLoggedIn ? 
 : };
// Output (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

Comments：注释

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

var content = (
  

    {/* child comment, put {} around */}
    
  
);

Multiple Case

If-Else

在JSX中是不可以直接在{}中加入if-else的，可以使用下面这种三元表达式：

React.render(
Hello World!
, mountNode);

不过三元表达式往往并不能满足需求，React建议的方式是在JS代码中使用if表达式：

var loginButton;
if (loggedIn) {
  loginButton = ;
} else {
  loginButton = ;
}

return (
  

    
    {loginButton}
  
);

Show-Hide

render: function() {
    return (
      

        This will be hidden if you set props.shouldHide 
        to something truthy.
      
    );
}

Switch-Case

return (
  

    
Color
    
Name
    
{this.state.color || "white"}
    
Hex
    

      {(() => {
        switch (this.state.color) {
          case "red":   return "#FF0000";
          case "green": return "#00FF00";
          case "blue":  return "#0000FF";
          default:      return "#FFFFFF";
        }
      })()}
    
  
);

Loop：循环

var rows = [];
for (var i=0; i < numrows; i++) {
    rows.push();
}
return {rows};