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>