React(JSX语法)-----JSX基本语法

JSX------HTML tags vs React Components：

　　1.To render a html tag,just use lower-case tag names in JSX;　

var myDivElement = <div className="foo" />;

React.render(myDivElement, document.body);

　　2.To render a React Component,just create a local variable that starts with an upper-case latter;

var MyComponent = React.createClass({/*...*/});

var myElement = <MyComponent someProperty={true} />;

React.render(myElement, document.body);

JSX-------The Transform

　　React JSX transforms from an XML-like syntax into native JS xml elements,attributes and children are transformed into arguments to React.createElement

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

　　1.Attribute Expressions:To use a JS expression as an attribute value,wrap the expression in a pair of curly braces({})instead of quotes("").

// Input (JSX):

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

// Output (JS):

var person = React.createElement(

  Person,

  {name: window.isLoggedIn ? window.name : ''}

);

　　2.Child Expressions:Likewise,JS expressions may be used to express children:

/ Input (JSX):

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

// Output (JS):

var content = React.createElement(

  Container,

  null,

  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)

);

　　3.Comments:it's easy to add comments within youe JSX,they are just JS expressions. you just need to bo careful to put {} around the comments when you are within the children sction of a tag.

var content = (

  <Nav>

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

    <Person

      /* multi

         line

         comment */

      name={window.isLoggedIn ? window.name : ''} // end of line comment

    />

  </Nav>

);

巴特西

React(JSX语法)-----JSX基本语法

最新文章

热门文章