jsx语法规则

2022-09-22 10:17:46 浏览数 (1)

1,定义虚拟DOM时,不要用引号 ""。

2,标签中混入js表达式时,要用 {}。

3,样式的类名不能用class,要用 className。

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

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

6,标签必须闭合。

7,标签首字母:

* 若小写字母开头,则将该标签转为html中同名元素,若html中标签无,则报错。

* 若大写字母开头,react就去渲染对应的组件,若组件没有,则报错。

案例代码

PlainBashC C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

<body>

<!--准备好一个容器 -->

<div id="text"></div>

<!-- 加载 React。引入react核心库-->

<!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。-->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 引入react-dom,用于支持react操作dom-->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!--引入babel,用于jsx转为js-->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">/*此处一定要写babel,不写默认js*/

const myId='xuSong'

const myDate='许嵩'

// 1,创建虚拟dom

const VDOM =(

<h1 className="title" id={myId.toLowerCase()}>

<span style={{fontSize:'2em'}}>{myDate}</span>

<Good>自定义标签(报错)</Good>

</h1>

)

//2,渲染虚拟dom到页面

ReactDOM.render(VDOM,document.getElementById('text'));

</script>

</body>

0 人点赞