JSX insert content
There are several situations in which JSX embedded variables are used as child elements as follows
Case 1: When the inserted variable is of type Number, String, or Array, it can be directly inserted and displayed ( the Array type will automatically display each item in the 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>
)
}
}
Case 2: When the variable is of type null, undefined, or Boolean, the content is empty;
- If you want to display null, undefined, Boolean, you need to convert it into a string;
- There are many ways to convert, such as the toString method, splicing with an empty string,
String(变量)etc.;
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/>)
Case 3: The Object object type cannot be used as a child element (error: not valid as a React child)
- Note: It's not that the object type cannot be written in curly braces, it's that the object type cannot be used as a child element
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/>)
Case 4: Embedded expressions in JSX
- operation expression
- Ternary operator
- Insert a function call
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/>)