React基础-JSX语法中插入内容的方式

JSX插入内容

JSX嵌入变量作为子元素有如下几种情况

情况一:当插入的变量是Number、String、Array类型时，可以直接插入显示(Array类型会自动将数组中的每一项展示)

class App extends React.Component {
    
    
  constructor() {
    
    
    super()

    this.state = {
    
    
      message: "代码片段",
      names: ["aaa", "bbb", "ccc"],
      num: 101
    }
  }

  render() {
    
    
    const {
    
     message, names, num } = this.state

    return (
      <div>
        {
    
    /* Number、String、Array类型可以直接显式 */}
        <h2>{
    
    message}</h2>
        <h2>{
    
    names}</h2>
        <h2>{
    
    num}</h2>
      </div>
    )
  }
}

情况二:当变量是null、undefined、Boolean类型时，内容为空;

• 如果希望可以显示null、undefined、Boolean，那么需要转成字符串;
• 转换的方式有很多，比如toString方法、与空字符串拼接，String(变量)等方式;

class App extends React.Component {
    
    
  constructor() {
    
    
    super()

    this.state = {
    
    
      aaa: undefined,
      bbb: null,
      ccc: true
    }
  }

  render() {
    
    
    const {
    
     aaa, bbb, ccc } = this.state

    return (
      <div>
        {
    
    /* null、undefined、Boolean类型显式内容为空,被忽略 */}
        <h2>{
    
    aaa}</h2>
        <h2>{
    
    bbb}</h2>
        <h2>{
    
    ccc}</h2>
        {
    
    /* 如果希望显式需要转为字符串类型 */}
        <h2>{
    
    aaa + ""}</h2>
        <h2>{
    
    String(bbb)}</h2>
        <h2>{
    
    ccc.toString()}</h2>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

情况三:Object对象类型不能作为子元素(报错: not valid as a React child)

• 注意: 并不是花括号中不能写对象类型, 是对象类型不能作为子元素

class App extends React.Component {
    
    
  constructor() {
    
    
    super()

    this.state = {
    
    
      student: {
    
    
        name: "chenyq",
        age: 18
      }
    }
  }

  render() {
    
    
    const {
    
     student } = this.state

    return (
      <div>
        {
    
    /* Object对象类型不能作为子元素, 会报错 */}
        <h2>{
    
    student}</h2>
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

情况四: JSX中嵌入表达式

• 运算表达式
• 三元运算符
• 插入一个函数调用

class App extends React.Component {
    
    
  constructor() {
    
    
    super()

    this.state = {
    
    
      firstName: "chen",
      lastName: "yq",
      age: 20,
      movies: ["黑话律师", "大话西游", "独行月球"]
    }
  }

  render() {
    
    
    const {
    
     firstName, lastName, age } = this.state

    return (
      <div>
        {
    
    /* 4.可以插入相应的表达式 */}
        {
    
    /* 运算表达式 */}
        <h2>{
    
    20 + 30}</h2>
        <h2>{
    
    firstName + " " + lastName}</h2>
        {
    
    /* 三元运算符 */}
        <h2>{
    
    age >= 18 ? "成年人" : "未成年"}</h2>
        {
    
    /* 调用一个函数 */}
        <ul>
          {
    
    this.getMoviesItem()}
        </ul>
      </div>
    )
  }

  getMoviesItem() {
    
    
    const liEls = this.state.movies.map(item => <li key={
    
    item}>{
    
    item}</li>)
    return liEls
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)