react学习之JSX

jsx 语法规则

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

const VDom = (
	<h1>定义虚拟DOM时，不需要引号</h1>
)

2. 标签中混入JS表达式要用{}

注意：这里是JS 表达式 ，不是JS语

• JS语句与JS表达式的区别：表达式会产生一个值，可以放在任何一个需要值得地方。

const data = ['Angular','React','Vue'];
const VDom = (
       <div>
           <h1>前端js框架列表</h1>
           <ul>
              {
              	// 数组map 方法会返回一个新的数据，babel会解析数组。
                 data.map((item) => (<li key={item+item}>{item}</li>))
              }
          </ul>    
       </div>
)

3. 样式的类型指定不要用class, 要用className

<style>
.box{
	color: green;
}
</style>

const VDom = (
	<h1 className="box">使用className</h1>
)

4. 内联样式，要用style={{[key]:value}}的形式去写，使用小驼峰。

要写font-size等用-链接的样式时，都要转换成小驼峰，如fontSize
value必须是string或者number

const VDom = (
	<h1 style={{color: 'color', fontSize: '20px'}}>使用className</h1>
)

5. 只有一个根标签

// 没有根标签，运行报错
/*
	报错信息:
	SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag
*/
const VDom = (
	<div id="h1">第一个标签</div>
	<div id="h2">第二个标签</div>
)

// 添加一个div 根标签
const VDom = (
	<div>
		<div id="h1">第一个标签</div>
		<div id="h2">第二个标签</div>
	</div>
)
// 

6. 标签必须闭合

const VDom = (
	<div>
		// input标签没有闭合，运行报错
		// <input type="text">

		<input type="text" />
	</div>
)

7. 标签首字母
   (1) 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名标签，则报错。
   (2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

const Good = (
	<div>Good 组件</div>
)
const VDom = (
	<div>
		// div 小写开头，判断为原生标签
		<Good>
			// Good 大写开头，判断为react组件.
		</Good>
	</div>
)