react 之jsx的表达式

import React, { Component } from 'react'

let str = "Hello World";
let obj = {
  name: "Karl",
  age: 19
}
let arr = [1, <a target="_blank" href="https://www.baidu.com">这里是超链接a标签</a>, "哈哈"]

let bool = true;

export default class Expression extends Component {
  render() {
    return (
      <div>
        <p>-------------------------这里是表达式的案例-------------------</p>
        {/* 字符串 */}
        <h2>{str}</h2>

        {/* 普通字符 */}
        <h1>普通字符</h1>

        {/* 表达式 */}
        <h1>{1 + 1}=2</h1>{/* 2=2 */}

        {/* 渲染对象:不允许直接渲染对象 */}
        {/* <h2>{obj}</h2> */}

        {/* 渲染对象中的属性 */}
        <h1>{obj.name}</h1>
        <h1>{obj["age"]}</h1>

        {/* 渲染数组 */}
        <h1>{arr}</h1>
        {/* bool值:无法直接渲染bool */}
        {/* <h1>{bool}</h1> */}

        {/* 三目运算符 */}
        <h1>{bool ? "这是真的" : "这是假的"}</h1>
        
        {/* 不能直接渲染语句 */}
        {/* {
          if(true){console.log(123)}
        } */}
      </div>
    )
  }
}