JSX 中使用 js 表达式

学习目标： 能够在 JSX 中使用表达式
语法：
{JS 表达式}

function App() {
  // 1.识别常规变量
  const name = '跟着老惠学前端'
  // 2.原生js方法调用
  const age = () => {
    return 25
  }
  //3.三元运算符
  const flag = true

  return (
    <div className="App">
      {name}
      {age()}
      {flag ? '真棒' : '真菜'}
    </div>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以使用的表达式
 1.字符串、布尔值、数值、null、undefined、object([]/{})
 2.算数运算（1+2）、字符串方法（“abcde”.split(‘’)）、数组方法（[‘a’,‘b’].join(‘-’)）
 3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句，这些叫做语句，不是表达式，不能书写在{}中！！！

// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
  return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
  <div className="App">
    {name}
    <br />
    {age()}
    <br />
    {flag ? '真棒' : '真菜'}
    <br />
  </div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19