jsx动态渲染数据

最新推荐文章于 2025-08-22 19:33:51 发布

前端小云儿

最新推荐文章于 2025-08-22 19:33:51 发布

阅读量136

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签：前端 react.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/142877305

react 专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>5jsx动态渲染数据</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/babel">
      const myid = "jsxId";
      const data = ["vue", "react", "angular"];
      const Vdom = (
        <div>
          <ul id={myid + 1} className="title" style={{ color: "red" }}>
            {data.map((item,index) => {
              return <li key={index}>{item}</li>
            })}
          </ul>
        </div>
      );

      ReactDOM.render(Vdom, document.getElementById("test"));
      /**
       * 1 react会直接渲染一个数组；对象则不会
       * 2 【表达式】：产生值，有返回值
       * a;a+b ;function a();
       * 3 【语句】if ；for
       *
       */
    </script>
  </body>
</html>