美文网首页
二、JSX语法 ------ 2020-03-21

二、JSX语法 ------ 2020-03-21

作者: 自己写了自己看 | 来源:发表于2020-03-21 10:33 被阅读0次

    1、index.js导入的各模块的作用:

    // react中是React的核心:基础语法、属性、状态、生命周期、组件等
    import React from "react";
    
    // react-dom的作用是把虚拟DOM渲染成真实的DOM
    import ReactDOM from "react-dom";
    
    // ReactDOM.render(JSX语法, 容器, 渲染完触发的回调);
    ReactDOM.render(<div style={{color:'red'}}>hello world!</div>, 
    document.getElementById("root"));
    

    2、什么是JSX

    JSX: JavaScript And XML[HTML]
    

    3、JSX中使用JS表达式:

    // 我们可以使用 {} 在JSX语法中解析 JS表达式;
    /**
    * {} 的使用注意事项:
    * 1、{} 不能直接放入对象(除数组和几种特殊情况除外);
    * 2、在使用style时,style的 {} 必须放置一个对象;
    * 3、虚拟的DOM对象也可以直接放在 {} 中;
    * 4、{} 中放置 null 、undefined 代表空元素,不会渲染在页面中
    */
    

    4、JSX语法中给HTML元素添加属性的几种特殊情况:

    // 1、样式类名:className
    
    // 2、style:style中必须放置一个对象
     <div style={{fontSize: '20px', color: 'red'}}>Hello World!!!</div>
    

    5、{} 中放置虚拟DOM对象:

    <div style={{fontSize: '20px', color: 'red'}}>
        Hello World!!!{null}{undefined}
        {arr.map(item => {
           return <a href="" key={item}>{item}</a>
        })}
     </div>
    

    相关文章

      网友评论

          本文标题:二、JSX语法 ------ 2020-03-21

          本文链接:https://www.haomeiwen.com/subject/bpxyyhtx.html