React入门---JSX内置表达式-6
Posted 阿泽大大
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React入门---JSX内置表达式-6相关的知识,希望对你有一定的参考价值。
个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达。(个人菜鸟理解,欢迎指正)
React 使用 JSX 来替代常规的 javascript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
1.在JSX中注释需要下载花括号中,语法 {/*注释*/}
2.在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。
例:
usermane不为空
render(){ //usermane不为空 var username="阿泽大大"; return( <div> <h1>这里是主体内容部分</h1> {/*这是注释的格式*/} {/*下面三元表达式*/} <p>{username==‘‘ ? ‘用户未登录‘ : ‘用户名:‘+username}</p> </div> ) } //运行结果 用户名:阿泽大大 (运行时和前面一样,通过http://localhost:8080运行,webpack-dev-server)
usermane不为空
render(){ //usermane不为空 var username=""; return( <div> <h1>这里是主体内容部分</h1> {/*这是注释的格式*/} {/*下面三元表达式*/} <p>{username==‘‘ ? ‘用户未登录‘ : ‘用户名:‘+username}</p> </div> ) } //运行结果 用户未登录
3.布尔判断 true / false
例:
bool为真
render(){ //bool为真 var bool=true; return( <div> <h1>这里是底部</h1> {/*通过true/false来控制按钮是否被禁用; disabled={} 不用‘‘,绑带动态属性时不用‘‘*/} <p><input type=‘button‘ value=‘默认按钮‘ disabled={bool}/></p> </div> ) } //运行结果 按钮被禁用
bool为真
render(){ //bool为假 var bool=false; return( <div> <h1>这里是底部</h1> {/*通过true/false来控制按钮是否被禁用; disabled={} 不用‘‘,绑带动态属性时不用‘‘*/} <p><input type=‘button‘ value=‘默认按钮‘ disabled={bool}/></p> </div> ) } //运行结果 按钮正常使用
4.解析html
例:解析空格
render(){ //声明一个html var html="HELLO WORLD"; return( <div> <h1>这是头部</h1> <p>{html}</p> </div> ); } //运行结果 HELLO WORLD 并没有将 解析为html的空格
解决方法1:对html的标记做Unicode转码 (http://tool.chinaz.com/)
render(){ //声明一个html //进行了unicode转码( ---\u0020) var html="HELLO\u0020WORLD"; return( <div> <h1>这是头部</h1> <p>{html}</p> </div> ); } //运行结果 HELLO WORLD 完成html空格解析
解决方法2:使用参数dangerouslySetInnerHTML进行html解码
render(){ //声明一个html //进行了unicode转码( ---\u0020) var html="HELLO WORLD"; return( <div> <h1>这是头部</h1> {/*参数dangerouslySetInnerHTML 可能会造成XSS攻击*/} <p dangerouslySetInnerHTML = {{__html : html}}></p> </div> ); } //运行结果 HELLO WORLD 完成html空格解析
还有更多JSX的内置表达式:http://www.runoob.com/react/react-jsx.html
以上是关于React入门---JSX内置表达式-6的主要内容,如果未能解决你的问题,请参考以下文章