JSX中使用Javascript表达式

嵌入JS表达式

• 数据存储在JS中
• 语法: { Javascript表达式 }
• 注意: 语法中是单大括号,不是双大括号

const name = 'Jack'
const dv = (
    <div>你好,用户: { name }</div>
)
ReactDom.render(dv, document.getElementById('root'))

注意点

• 单大括号中可以使用任意的Javascript表达式
• JSX自身也是JS表达式
• 注意: JS中的对象是一个例外,一般只会出现在style属性中
• 注意: 不能在{}中出现语句(比如: if, for等等)

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用 JSX 创建 React 元素
const sayHi = () => 'Hi~'

const dv = <div>我是一个div</div>
const title = (
  <div>
    <h1 className="title">Hello JSX</h1>
    <p>{1}</p>
    <p>{'a'}</p>
    <p>{1 + 7}</p>
    <p>{3 > 5 ? '大于' : '小于等于'}</p>
    <p>{sayHi()}</p>
    {dv}
    
    {/* 错误演示 */}
    {/* <p>{ {a: '6'} }</p> */}
    
    {/* 错误演示 */}
    {/*  if(true){}  */}
    {/*  for(var i = 0; i <= 10; i++)  */}
  </div>
)

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))