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&nbsp;WORLD";

        return(
                <div>
                    <h1>这是头部</h1>
                    <p>{html}</p>
                </div>
            );
    }
    //运行结果 HELLO&nbsp;WORLD 并没有将&nbsp;解析为html的空格

解决方法1:对html的标记做Unicode转码 (http://tool.chinaz.com/)

render(){
        //声明一个html
        //进行了unicode转码(&nbsp;---\u0020)
        var html="HELLO\u0020WORLD";

        return(
                <div>
                    <h1>这是头部</h1>
                    <p>{html}</p>
                </div>
            );
    }
    //运行结果 HELLO WORLD 完成html空格解析

解决方法2:使用参数dangerouslySetInnerHTML进行html解码

render(){
        //声明一个html
        //进行了unicode转码(&nbsp;---\u0020)
        var html="HELLO&nbsp;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的主要内容,如果未能解决你的问题,请参考以下文章

6手把手教React Native实战之JSX入门

React2.JSX的使用

react入门

react简述-react基础-jsx语法-jsx表达式-jsx动态属性-jsx列表渲染

react 入门

React入门-JSX和虚拟dom