React实践系列笔记-JSX

JSX

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

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

React.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!div>
    })
  }
  div>,
  document.getElementById('example')
);

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

var arr = [
  <h1>Hello world!h1>,
  <h2>React is awesomeh2>,
];
React.render(
  <div>{arr}div>,
  document.getElementById('example')
);

Transfer

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

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

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

JavaScript Expressions

属性表达式

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

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

Boolean Attributes

// These two are equivalent in JSX for disabling a button
"button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button
"button" />;
<input type="button" disabled={false} />;

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 */}
    window.isLoggedIn ? window.name : ''} // end of line comment
    />
  
);

Multiple Case

If-Else

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

React.render(<div id={condition ? 'msg' : ''}>Hello World!div>, mountNode);

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

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  nav>
);

Show-Hide