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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨落云尚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值