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.字符串、布尔值、数值、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>
)

JSX 中使用 js 表达式_第1张图片

你可能感兴趣的:(React新人手把手入门,JSX,javascript,前端,开发语言)