002 jsx使用方式-插值表达式

最新推荐文章于 2024-07-23 15:03:18 发布

猴子敲代码

最新推荐文章于 2024-07-23 15:03:18 发布

阅读量272

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/test253506088/article/details/117925104

版权

React 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文介绍了React初学者必备的JSX基本语法，包括创建根节点、插值表达式、渲染数组、修改标签属性与CSS样式。通过实例演示了如何在jsx中使用这些技巧，并展示了引入外部js和处理非HTML内容的方法。

摘要由CSDN通过智能技术生成

Jsx的基本语法：

<!DOCTYPE html>
<html>
<head>
    <title>React初次使用</title>
    <!-- 引入react,这是dev开发环境的 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom，选择dev开发环境的 -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 引入bable -->
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
</head>

<body>
    <!-- 创建根节点,每个页面都需要有根节点 -->
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        let dom =   
                <h1>
                    {/*我是jsx注释语法*/}
                    {/*在jsx里多个标签需要一个父标签包起来*/}
                    <span>hello world</span><br/>
                    <span>你好世界</span>
                </h1>;
        //渲染到根节点上
        ReactDOM.render(dom,document.getElementById("app"));
    </script>
</body>
</html>

Jsx使用插值表达式：

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        let user = {
            name: "黑白大彩电",
            age: 21
        };
        function sout(user) {
            return user.name + (user.age + 2) + "岁";
        }
        //在jsx里使用插值表达式
        let dom =
            <h1>
                <span>{user.name}{user.age}岁</span><br />
                <span>{user.name}{user.age + 1}岁</span><br />
                <span>{sout(user)}</span>
            </h1>;
        //渲染到根节点上
        ReactDOM.render(dom, document.getElementById("app"));
    </script>
</body>

当js没写在html内时，如图所示html和js在同级目录，引入js时需要写入type="text/babel"，否则一样把jsx翻译成js。

<!DOCTYPE html>
<html>
<head>
    <title>React初次使用</title>
    <!-- 引入react,这是dev开发环境的 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom，选择dev开发环境的 -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 引入bable -->
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- 引入外部js，注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel" src="./jsx.js"></script>
</body>
</html>

也可以渲染数组：

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        let list = [
            <p>新闻列表1</p>,
            <p>新闻列表2</p>,
            <p>新闻列表3</p>,
            <p>新闻列表4</p>,
            <p>新闻列表5</p>,
            <p>新闻列表6</p>
        ];
        //渲染数组
        //渲染到根节点上
        ReactDOM.render(list, document.getElementById("app"));
    </script>
</body>

Jsx修改标签属性和css样式

<body>
    <style>
        .myStyle {
            color: deeppink;
        }
    </style>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        let baidu = "https://www.baidu.com";
        let myCss = { color: "red" }
        let dom =
            <div >
                {/*标签属性设置*/}
                <a href={baidu}>点我去百度</a>;
                {/*内敛样式*/}
                <p style={myCss}>内联样式哦</p>
                {/*外联样式*/}
                <p className="myStyle">由于class是js的关键字，所以css的class用className代替</p>
            </div>;
        //渲染到根节点上
        ReactDOM.render(dom, document.getElementById("app"));
    </script>
</body>