往期回顾

前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰。今天我们来看一种优雅的编写React的代码的一种方式 JSX。

JSX

 

JSX就是把 js 和 xml 结合起来编写程序的一种格式,简单的说就是给我们的 JS 添加了 XML 的语法扩展。有了 JSX 之后,可以帮助我们在编写模板的时候结构更加简单清晰。 我们可以对比一下,咱们使用 ReactElement 和 JSX 编写同一个结构时的区别,大家就会喜欢上 JSX;

  • 利用 ReactElement 编写的结构

let Title = React.createElement("h1",null,"页面标题"); 

let Header = React.createElement("header",null,Title);  

let Sider = React.createElement("aside",null,"侧边栏");  

let Content = React.createElement("article",null,"页面内容"); let Main = React.createElement("div",null,Sider,Content); 

let Footer = React.createElement("footer",null,"页面底部");  

let Page = React.createElement(      "div",      null,

     Header,

     Main,

     Footer);

 ReactDOM.render(

     Page,

     document.getElementById("root")

 );

  

  • 利用 JSX 编写的结构

ReactDOM.render(

        <div>

            <header>

                <h1>页面标题</h1>

            </header>

            <div>

                <aside>侧边栏</aside>

                <article>页面内容</article>

            </div>

            <footer>页面底部</footer>

        </div>

        document.getElementById("root")

    );

  

从上述示例中我们看到在 JSX 中我们可以直接使用我们熟悉的 HTML 标签来书写我们的模板,这样的话结构层级非常清晰,也便于我们维护,当然上手也更便捷。

 

JSX 使用时的注意事项

  • 在使用 JSX 中,不能嵌套多个同级标签,一定要在外边加一个父级

  • 使用 JSX 时,我们需要使用 Babel 来进行编译,所以必须引入 Babel 并且在 script 上 添加 type="text/babel" 来提示 babel 编译我们 script 中的代码,如下所示:

    <script type="text/babel">

        ReactDOM.render(

        <div>

                <h1>hello world</h1>

                <p>注意 type 另外 必须有一个父标签包裹</p>

        </div>,

        document.getElementById("root")

        );

    </script>

  

  • 使用 JSX 时,当我们要写的是一个 HTML 标签时,请全部小写

  • 使用 JSX 时,所有标签都必须闭合单标签 <单标签 /> 也一样必须闭合

 

插值表达式

当我们需要在 JSX 中插入一个js数据时,我们就需要使用插值表达式。 在 JSX 中,读到{} 时,它就会认为你要插入一条js数据,这个 {} 就是插值表达式,使用示例如下:

    let a = "hello";

    let b = "React";

    ReactDOM.render(

        <h1>{a + b}</h1>,

        document.getElementById("root")

    );

  

插值表达式在什么时候使用

  • 当我们需要在 JSX 中使用 JS 中的数据的时候,我们就需要使用差值表达式

  • 当我们要在 JSX 中添加 注释的时候,也需要使用插值表达式 {/* 在这里写JSX的注释 */}

 

使用插值表达式时的注意事项

  • {}中,接收一个 JS 表达式,可以是我们的算术表达式,变量 或函数调用, 最终 {} 接收的是表达式 计算的结果

  • {}中,接收的是 函数调用时,该函数需要由返回值

  • {}中,不能写 if else 以及 switch 这些流程控制语句,但是可以使用三目表达式 来进行判断,示例如下:

    let a = 10;

          let b = 20;

          ReactDOM.render(

               <h1>{a > b?"正确":"错误"}</h1>,

               document.getElementById("root")

      );

  

  • {}中,不能写 for 或者 whlie 这些循环语句,可以使用数组方法代替,示例如下:

    let arr = [

       "这是第一项",

       "这是第二项",

       "这是第三项"

      ]

      ReactDOM.render(

           <ul>

           {arr.map((item,index)=>{

           /* 当我们要向 JSX 中添加一组元素时,一定要设置  key 属性,具体内容 我们会在后边的文章中讲到 */

           return <li key={index}>{item}</li>

           })}

           </ul>,

       document.getElementById("root")

      );

  

不同类型数据在插值表达式中的数据输出

  • 字符串、数字:原样输出

  • 布尔值、空、未定义:输出空值,也不会有错误

  • 对象:不能直接输出,但是可以通过其他方式,Object.values、Object.keys 等方法去解析对象

  • 数组:支持直接输出,默认情况下把数组通过空字符串进行拼接

 

JSX的属性操作

  • 属性值加了引号,那么就是一个普通的属性书写方式

    ReactDOM.render(

          <h1 title="React笔记">React笔记</h1>,

          document.getElementById("root")

      );

  

  • 属性值可以直接写成差值表达式

    let title = "React笔记" 

      ReactDOM.render(

          <h1 title={title}>React笔记</h1>,

          document.getElementById("root")

      );

  

  • class:在 JSX 中需要使用 className 属性去代替 class

ReactDOM.render(

      <h1 className="title">React笔记</h1>,

      document.getElementById("root")

  );

  

  • style:在 JSX 中 style 的值只能是对象 style={{ property : value }}

let style = {

  borderBottom: "1px solid #000"

  }

  ReactDOM.render(

      <h1 style={style}>React笔记</h1>,

      document.getElementById("root")

  );

 

  ReactDOM.render(

      <h1 style={{

      borderBottom: "1px solid #000"

      }}>React笔记</h1>,

      document.getElementById("root")

  );

  

看完了 JSX 的基本操作之后,我们来看一个小例子,如何通过数据来生成一个简单的视图

let data = {

        title: "巅峰榜·热歌",

        details: [

                {

                name: "体面",

                message: "《前任3:再见前任》电影插曲"

                },

            

                {

                name: "说散就散",

                message: "《前任3:再见前任》电影主题曲"

                },

            

                {

                name: "BINGBIAN病变 (女声版) ",

                message: "抖音热门歌曲"

                }

        ]

 }

    ReactDOM.render(

        <section className="box">

        <h2 className="title">{data.title}</h2>

        <ul className="list">

        {data.details.map((item,index)=>{

        return (

        <li>

            <p className="name">{item.name}</p>

            <p className="message">{item.message}</p>

        </li>

        );

        })}

        </ul>

        </section>,

    document.getElementById("root")

    );

  

关于 JSX 的基本使用我们就说到这,在下一章节中我们要说到一个比较重的内容--组件。

当然在 React 中编写组件的方式也会有多种,我们在下一篇中详细的说。

——以上是笔者归纳总结,如有误之处,欢迎指出。

 

订阅号ID:Miaovclass

关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;