React jsx中js表达式

嵌入JS表达式

在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。

let num = 100
let bool = false;

// JSX 语法
var myh1 = (
  <div>
    {/* 我是注释 */}
    {num}
    <hr />
{/* 三目运算 */}
{true ? "条件为真" : "条件为假"}
  </div>
)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hell world</title>
</head>

<body>
  <!-- 用于内容显示容器 挂载点 -->
  <div id="app"></div>


  <!-- react核心类库 -->
  <script src="./js/react.development.js"></script>
  <!-- dom操作 -->
  <script src="./js/react-dom.development.js"></script>
  <!-- 解析jsx语法的兼容库 -->
  <script src="./js/babel.min.js"></script>
  <script type="text/babel">
    const app = document.querySelector('#app')

    const num = 11

    // 如果是单行则不需要小括号，多行需要使用小括号括起来
    const vnode = (<div>
      {
        // 注释也是标签 注释不会解析到html中的
        // 我是一个单行注释
        /*
        我是一个多行注释
        */
      }
      <h3>您的年龄为：{num} 岁</h3>
      <hr />
      {
        /* 三目运算 */
      }
      <div>{num > 20 ? '老年' : '儿童'}</div>
    </div>)


    // 把虚拟dom转为真实的dom并挂载到页面中
    ReactDOM.render(vnode, app)
  </script>


</body>

</html>

posted on 2021-02-25 18:49 Tsunami黄嵩粟阅读(70) 评论(0) 编辑收藏举报