JavaScript XML

jsx

  • 全称：JavaScript XML
  • react 定义的一种类似于 XML 的 js 扩展语法：js + XML

jsx 语法规则

定义虚拟 DOM 时， 不要写引号

<body>
    <div id="test"></div>
<script type="text/babel">
// 创建虚拟 DOM
const VDOM = (
    <h2 id="atguigu">
        <span>hello,react</span>
    </h2>
)
// 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>

标签中混入 js 表达式时要用大括号({})

const myId = "id";
const myData= "data";
// 创建虚拟 DOM
const VDOM = (
    <h2 id="{myId}">
        <span>{myData}</span>
    </h2>
)

样式的类名指定不要用 class，要用 className

  • ES6 有 class 关键字
<style>
    .title {
        background-color: red;
    }
</style>
<script type="text/babel">
const VDOM = (
    <h2 className="title" id="{myId}">
        <span>{myData}</span>
    </h2>
)
</script>

内联样式要用 style={{key:value}} 的形式写

  • 外面不用带引号
const VDOM = (
    <h2 className="title" id="{myId}">
        <span style={{color: "blue"}}>{myData}</span>
    </h2>
)

虚拟 DOM 必须只有一个根标签

标签必须闭合

  • 单标签也必须闭合
<input type="text" />

标签首字母

- 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
- 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
posted @ 2021-03-16 20:40  懒惰ing  阅读(196)  评论(0)    收藏  举报