2024年最全React基础-JSX语法中插入内容的方式_jsx插入标签，网易架构师深入讲解大数据开发开发

2401_84181626

于 2024-05-14 04:59:17 发布

阅读量289

点赞数 4

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84181626/article/details/138831935

版权

程序员专栏收录该内容

153 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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()



> 
> 情况三: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()



> 
> 情况四: 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() {