前端之React实战-JSX介绍与使用
发布时间:2020-12-15 05:23:12 所属栏目:百科 来源:网络整理
导读:JSX HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。 var names = ['Alice','Emily','Kate'];React.render( div { names.map(function (name) { return divHello,{name}!/div }) } /div,docum
JSXHTML 语言直接写在 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') ); TransferJSX编译器的核心是将基于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 CaseIf-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-Casereturn ( <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>; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |