React Getting Started---jsx built-in expressions-6

Personal understanding: The contact JSX is in the react in the Render method inside the JS, because there can only be a node, so you write things are in a div, to have JS so through the JSX to express. (Personal novice Understanding, welcome correction)

React uses JSX instead of regular JavaScript.

JSX is a JavaScript syntax extension that looks much like XML.

1. Comments in JSX need to be downloaded in curly braces, syntax {/* comment */}

2. You cannot use the if Else statement in JSX, but you can use an conditional (ternary) expression instead.

Cases:

Usermane is not empty

render () {//Usermane is not empty        varUsername="Azeri greatly"; return(                <div>                     {/*This is the format of the note*/}                    {/*The following three-dimensional expression*/}                     <p>{username=="'?'user not logged in':'User name:'+username}</p> </div>            )    }    //Run result user name: Azeri large (run as before, run through http://localhost:8080, Webpack-dev-server)

Usermane is not empty

render () {//Usermane is not empty        varUsername=""; return(                <div>                     {/*This is the format of the note*/}                    {/*The following three-dimensional expression*/}                     <p>{username=="'?'user not logged in':'User name:'+username}</p> </div>            )    }    //Run result user not logged in

3. Boolean Judgment True/false

Cases:

BOOL is true

render () {//BOOL is true        var BOOL=true; return(                <div>                     {/*control whether the button is disabled by True/false, disabled={} No ', no ' with the dynamic property of the strap '*/}                    <p><input type='Button'Value='Default button'disabled={BOOL}/></p> </div>            )    }    //The Run Results button is disabled

BOOL is true

render () {//bool is false        var BOOL=false; return(                <div>                     {/*control whether the button is disabled by True/false, disabled={} No ', no ' with the dynamic property of the strap '*/}                    <p><input type='Button'Value='Default button'disabled={BOOL}/></p> </div>            )    }    //Run Results button to work correctly

4. Parsing HTML

Example: Parsing a space

render () {        // declare an HTML        var html="hello&nbsp; World";         return (                <div>                                );    }     // Run result hello&nbsp; World does not have a space to parse &nbsp; into HTML

Workaround 1: Do Unicode transcoding for HTML markup (http://tool.chinaz.com/)

render () {        // declaration of an        HTML// Unicode transcoding (&nbsp;---\u0020)        var html="hello\u0020world";         return (                <div>                                );    }     // Run result HELLO World complete HTML space parsing

Solution 2: Use parameter dangerouslysetinnerhtml for HTML decoding

render () {//declares an HTML//Unicode transcoding (&nbsp;---\u0020)        varHtml="hello&nbsp; World"; return(                <div>                     {/*parameter dangerouslysetinnerhtml may cause XSS attacks*/}                    <p dangerouslysetinnerhtml = {{__html:html}}></p> </div>            ); }    //Run result HELLO World complete HTML space parsing

There are more built-in expressions for JSX: http://www.runoob.com/react/react-jsx.html

React Getting Started---jsx built-in expressions-6