react中jsx语法注意要点

最新推荐文章于 2024-07-16 14:30:20 发布

鲤忆

最新推荐文章于 2024-07-16 14:30:20 发布

阅读量46

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129756944

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<body>
    <div id="app"></div>
    <script src="./assets/react16.4.js"></script>
    <script src="./assets/react-dom.js"></script>
    <script src="./assets/babel.min.js"></script>
    <script type="text/babel">
        // 1：jsx语法中只能由一个根标签
        // 2：jsx 只能在（ ）中编写
        // 3：在html中需要写js，需要使用 单{ }
        // 问题：哪些内容可以在 { } 中编写
        // 3.1 变量引用

         let msg = 'hellow word 渲染变量';
         let handle = ()=>{
            console.log('handle run');
            return 'handle run'
         }


         let data = ['12332','fasdfdf'];
         /**
          * arr.map()
          * 作用：数组重组，返回全新数组
          * 返回：数组
          * 参数：回到函数：
          * 1：回调函数执行次数===数组参数
          * 2：返回值数组中元素为回调函数return的值
          * 3：回参为arr中的元素
          */ 
         let ChildNode = data.map(item=>{
            console.log(item);
            // 输出的是虚拟dom 小括号可以省略，建议添加上
            return (<span>{item}</span>)
         })
         console.log(ChildNode);

    
        //  只有vNode内部才是jsx语法
         let vNode = (
            <div>
              <h1>hellow word</h1>
              <div>每个虚拟dom只能由一个根标签</div>
              {/* sx语法中的注释 */}
              <h2>{ 
                /* 注释，变量引用 */
                msg
               }</h2>
               
               {/* 
                1：jsx中如果由 js运算，先运算js得到【结果】
                2：确认虚拟dom.
                3: 将虚拟dom渲染为真实dom 

                js中运算并且由结果的有哪些？？？
                1：表达式。
                2：变量引用
                3：函数执行
                */}

                <h1>{ 1+1+'123123' /*写表达式，输出表达式运算结果*/}</h1>
                <h1>{ handle() /* 可以写函数执行 */ }</h1>
                <h1>{ 'aaa' }</h1>
                <h1>{ 123 }</h1>
                <h1>{ undefined }</h1>
                <h1>{ null }</h1>
                <h1>{[123,213,123123,'daffasd']}</h1>
                {/* Objects are not valid as a React child (found: object with keys {a}). If you meant to render a collection of children, use an array instead. */}
                {/*<h1>{ {a:'123'} }</h1>*/}
                <div>
                  {
                    [
                    <span>12332</span>,
                    <span>fasdfdf</span>
                    ]
                  }
                </div>

                <div>
                {
                    ChildNode
                }
                </div>

                {/* 直接在虚拟dom上处理的，语法多 */}
                <div>
                 {
                    data.map(item=>(<span>{item}</span>))
                 }
                 </div>

                 {/* 语法注意： 一个{} 只需要一个运算结果，所以只能写一个表达式，一个变量引用，一个函数执行 */}
                 {/* <h1>{1+1;2+2}</h1> */}


                 <h1 id={'text'}>hellow word</h1>
                { /*<h1 id={'text','aaa'}>语法错误</h1>*/}
                
                 <h1 id={['text','aaa'].join(' ')}>多个id</h1>
                 <h1 id={'text aaa'}>属性动态赋值，本质需要字符串</h1>
                 {/* Invalid DOM property `class`. Did you mean `className`? */}
                 <h1 className={'text aaa'}>注意将class变为className</h1>
                 

 {/* ----------------------为错误写法----------------------------------------------------- */}
                
                  <h1>{
                    // 不能写if for switch...等语句
                    // if(true){
                    //     bug
                    // }
                    // for(var i =0;;i<2;i++){}
                 }</h1>


                 {/* 
                 The tag <wenkai> is unrecognized in this browser. If you meant to render 
                 a React component, start its name with an uppercase letter. */}
                 <wenkai>{ '自定义标签小写' }</wenkai>

                 {/* 
                  bug : Wenkai is not defined
                */}
                
                {/*<Wenkai>{ 'REACT 组件bug' }</Wenkai> */}



                {/* bug:标签必须闭合 */}
                {/*  <input type="text" > */}
            </div>
        )
        // let node = '<p>{str}</p>' // 注意：这是js中字符串类型，不是虚拟dom
        // 注意:虚拟dom是一个json对象
        ReactDOM.render(vNode,document.getElementById('app'))


        // 查看：虚拟dom和真实dom的区别
        // console.log(vNode);
        // console.dir(document.querySelector('#app'));