首页 > 代码库 > React入门---JSX内置表达式-6

React入门---JSX内置表达式-6

2024-09-21 06:19:18   218人阅读

个人理解：接触的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=http://www.mamicode.com/‘默认按钮‘ disabled={bool}/></p>
                </div>
            )
    }
    //运行结果 按钮被禁用
bool为真
render(){
        //bool为假
        var bool=false;

        return(
                <div>
                    <h1>这里是底部</h1>
                    {/*通过true/false来控制按钮是否被禁用; disabled={} 不用‘‘,绑带动态属性时不用‘‘*/}
                    <p><input type=‘button‘ value=http://www.mamicode.com/‘默认按钮‘ 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


联系
我们