注释
render(){
// 在 js 中的注释方式
return(
<div>
<Header/>
<Body/>
<Footer/>
{/*在 jsx 中的注释方式*/}
</div>
)
}
render(){
// 在 js 中的注释方式
return(
<div>
<Header/>
<Body/>
<Footer/>
{/*在 jsx 中的注释方式*/}
</div>
)
}
PS:注意在jsx中不可以在最外层进行注释(div内部)
变量render(){
var bTemp = true; // 在 js 中定义变量
return(
<div>
<Header/>
<Body/>
<Footer/>
{/* 在 jsx 中使用变量 bTemp ,传递参数 */}
<input type='button' value='测试按钮' disabled={ bTemp } />
</div>
)
}
三元表达式
render(){
var bTemp = true; // 在 js 中定义变量
return(
<div>
<Header/>
<Body/>
<Footer/>
{/* 在 jsx 中使用变量 bTemp ,传递参数 */}
<input type='button' value='测试按钮' disabled={ bTemp } />
</div>
)
}
render(){
var bInput = false;
var userName = 'leo';
return(
<div>
<p>{ userName=='' ? '用户还没有登录' : '用户名:' + userName }</p>
<Header/>
<input type='button' value={ userName } disabled={ bInput }/>
<Footer/>
</div>
)
}
内嵌HTML
render(){
var bInput = false;
var userName = 'leo';
return(
<div>
<p>{ userName=='' ? '用户还没有登录' : '用户名:' + userName }</p>
<Header/>
<input type='button' value={ userName } disabled={ bInput }/>
<Footer/>
</div>
)
}
(uncoide转码工具 http://tool.chinaz.com/tools/unicode.aspx )
render(){
// var html = 'Hello Wordld';
var uHtml = 'Hello\u0020World';
var html = 'Hello World';
return(
<div>
<Header/>
{/*两种方式解析html
1.直接将其转化为unicode编码
2.使用dangerouslySetInnerHTML(慎用,防止XSS攻击)
*/}
<p>{ uHtml }</p>
<p dangerouslySetInnerHTML={{ __html:html }}></p>
<Footer/>
</div>
)
}