React的jsx的用法-CSDN博客

本文链接：https://blog.csdn.net/weiyi47/article/details/132679908

React是一个流行的JavaScript库，用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一，它允许开发人员在JavaScript中编写HTML，从而使代码更加简洁和易于阅读。

JSX是一种语法扩展，它允许开发人员在JavaScript中编写类似于HTML的代码。它使用类似XML的标记来描述组件的结构和样式。例如，下面是一个简单的JSX组件：

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

在这个例子中，我们定义了一个名为MyComponent的函数组件，它返回一个包含HTML标记的JSX元素。这个元素包含一个<div>标记，其中包含一个<h1>标记和一个<p>标记。这些标记被称为“元素”，它们可以包含属性和子元素。

JSX的语法非常类似于HTML，但有一些重要的区别。首先，JSX元素必须使用尖括号< >来包围。其次，JSX属性必须使用双引号"来包围。最后，JSX元素必须以分号;结尾。

除了HTML标记外，JSX还支持JavaScript表达式。这意味着我们可以在JSX中使用变量、函数和算术运算符等JavaScript语法。例如，下面是一个使用JavaScript表达式的JSX组件：

const MyComponent = () => {
  const name = "John";
  const age = 30;
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

在这个例子中，我们定义了两个变量name和age，然后在JSX中使用它们来显示用户的姓名和年龄。我们使用花括号{ }来将JavaScript表达式嵌入到JSX中。

JSX还支持JavaScript的条件语句和循环语句。例如，下面是一个使用条件语句的JSX组件：

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome back!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
};

在这个例子中，我们定义了一个名为isLoggedIn的属性，它表示用户是否已登录。然后，我们使用条件运算符? :来根据用户是否已登录显示不同的消息。

JSX还支持JavaScript的循环语句。例如，下面是一个使用循环语句的JSX组件：

const MyComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

在这个例子中，我们定义了一个名为items的属性，它是一个包含多个对象的数组。然后，我们使用Array.map()方法来遍历数组，并为每个对象创建一个<li>元素。我们还使用key属性来指定每个元素的唯一标识符，以提高性能。

jsx的{}能够放什么—表达式—值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用react的环境-->
    <script src="./js/babel.min.js"></script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>

    <!--
        babel的作用就是把 react的语法转为 js语言
        react-dom的作用就是把 虚拟dom转为dom
        react.development 开发环境下的react源码
    -->
</head>
<body>
<!--真是的dom-->
<div id="app"></div>

<script type="text/babel">
    let classNameVal = "content"
    let text="刘明飞快的在回你眼前的这个未婚妻是什么情况"
    function add(){
        return "真的让人无法自拔啊!!!"
    }
    let list=["心海","甘雨","艳菲","八重"]
    let VDOM = (
        <div className={classNameVal}>
            <p style={{color:"red",fontSize:"29px"}}>你好{classNameVal}</p>
            <img src="./1.jpg" alt="" width="239" height="159"/>
            {
                //这里是注释
                /*
                多行注释
                多行注释
                * */
            }
            <p>{text}</p>
            <p>{text+"看着他布灵布灵的大眼睛"}</p>
            <p>{add()}</p>
            <div>
                我的老婆们:
                {
                    list.map(ele=>{
                        return <h2>{ele}</h2>
                    })
                }


            </div>
        </div>
    )

    ReactDOM.render(VDOM, document.querySelector("#app"))
    /*
         在 {} 里能写什么   ---表达式---也就是值
         js代码 和 js表达式

         a. 表达式: 一个表达式会产生一个值，可以在任意需要值的地方 使用
             a
             a+520
             fn()
             list.map

         b. 流程控制语句
             if
             for
             switch

      */
</script>


</body>
</html>