温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

react中JSX的注意点有哪些

发布时间:2022-03-11 09:11:39 来源:亿速云 阅读:124 作者:iii 栏目:开发技术

今天小编给大家分享一下react中JSX的注意点有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

    1 JSX 是一个表达式

    JSX 是 JavaScript 的语法扩展,本质上是 React.createElement()方法的语法糖。

    Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用,所以它被看作一个表达式。

    这意味着你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX:

    function getGreeting(user) {
      if (user) {
        return <h2>Hello, {formatName(user)}!</h2>;
      }
      return <h2>Hello, Stranger.</h2>;
    }

    2 JSX 的属性

    2.1 驼峰命名

    JSX 是 JS 的扩展,所以使用驼峰命名来定义属性的名称,而不使用HTML 属性名称的命名约定

    比如:

    <div className="container"></div>

    上述 JSX 表达式中 class 写作 className

    2.2 style 接收一个对象

    style 接收一个对象,而不是字符串

    比如:

    let style = {
        width: "100px",
        height: "100px",
        background: "red"
    };
    ReactDOM.render(
        <div className="box" style={style}></div>,
        document.querySelector("#root")
    );

    3 JSX 标签没有子元素

    如果一个标签中没有内容,可以使用/>来闭合标签

    比如:

    const element = <img src={user.avatarUrl} />;

    4 JSX 防止注入攻击

    可以安全地在 JSX 中插入用户输入内容

    React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS攻击。

    5 唯一父元素

    JSX 表达式必须有一个父元素

    换句话说,下面的写法会报错

    ReactDOM.render(
        <div className="box" style={style} />
        <input type="text" />,
        document.querySelector("#root")
    );

    正确的写法:

    ReactDOM.render(
        <div>
            <div className="box" style={style} />
            <input type="text" />
        </div>,
        document.querySelector("#root")
    );

    如果我们不想让父元素被渲染在页面上,可以使用React.Fragment

    React.Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。

    render() {
      return (
        <React.Fragment>
          Some text.
          <h3>A heading</h3>
        </React.Fragment>
      );
    }

    也可以使用其简写语法 <></>,请参阅 React v16.2.0: Fragments 支持改进。

    render() {
      return (
        <>
          Some text.
          <h3>A heading</h3>
        </>
      );
    }

    以上就是“react中JSX的注意点有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI