jsx的用法

什么是 jsx

jsx 是一种 JavaScript 的语法扩展（eXtension），有时候也叫做 JavaScript XML，它能让我们可以在 js 中编写 html

jsx 的使用

书写规范

• jsx的顶层只能有一个根元素，即就是最外层需要包括一个 div 标签或者 Fragment
• 在 jsx 最外面包裹一个 () ，就可以进行换行书写
• jsx 中单、双标签都可以

注释的使用

render() {
   
  return (
    <div>
      {
   /* 注释 */}
      <h2>Hello World</h2>
    </div>
  )
}

jsx 中嵌入变量

• 当变量是Number、String、Array类型时，可以直接显示
• 当变量是null、undefined、Boolean类型时，内容为空，如果希望显示，则需将其转成字符串
• 对象类型不能作为子元素（not valid as a React child）

注意：若字符串为 html 代码的话，那么默认会将其以字符串的形式展示

<script type="text/babel">
  class App extends React.Component {
   
    constructor(props) {
   
      super(props);

      this.state = {
   
        name: '小冯',
        age: 18,
        arr: ['f', 'y', 'x'],
        flag: false,
        obj: {
   
          name: '张三',
          age