Reactjs学习-JSX语法

本篇是关于React的基础-JSX语法

  • 什么是JSX
    在js文件中写html, 这样的语法就是JSX

 

  • 如何书写
    跟html写法一致,注意,首字母大写的标签是组件,首字母小写的,例如 div是html元素

 

  • 有哪些注意事项

    1. 在类组件中写注释,
    用花括号包起来



    2. style中的某个属性需要用state中的值,  用模板字符串来和state一起写



 3. className需要用到state中的某个值来判断,  可以这么写



 4.state的值是一个数组,渲染的时候可以用map


注意: 遍历时需要加key,建议不要用index做key


 5.在函数组件中 返回多个元素的时候,最外层需要用一个div 或者 React.Fragment 包起来

    类组件的render函数也有这种要求


return返回了三个div,所以最外层要用一个div把这三个div包起来



return返回了三个div,所以最外层要用一个Fragment把这三个div包起来
这个Fragment相当于一个占位符,使用它不用在dom中添加额外的节点

             

 

 

posted @ 2023-07-18 18:02  芋圆小宝  阅读(22)  评论(0)    收藏  举报