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 awesome</h2>,]; 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>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,{color:"blue"},React.createElement(Profile,null,"click")
);

JavaScript Expressions

属性表达式

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

// Input (JSX):
var person = <Person name={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
<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} />;

Child Expressions

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

Comments：注释

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

var content = (
  <Nav>
    {/* child comment,put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);

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

<style type="text/css">
    .hidden { display:none; }
</style> render: function() { return ( <div className={this.props.shouldHide ? 'hidden' : ''}> This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div> ); }

Switch-Case

return (
  <section> <h1>Color</h1> <h3>Name</h3> <p>{this.state.color || "white"}</p> <h3>Hex</h3> <p> {(() => { switch (this.state.color) { case "red": return "#FF0000"; case "green": return "#00FF00"; case "blue": return "#0000FF"; default: return "#FFFFFF"; } })()} </p> </section> );

Loop：循环

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