react中JSX的注意点详解

更新时间：2022年03月10日 16:45:54 作者：蜜瓜

这篇文章主要为大家详细介绍了react中JSX的注意点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1 JSX 是一个表达式

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

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

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

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

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.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

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

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

React根据当前页面路由进行自动高亮示例代码
要根据当前页面路由自动高亮顶部菜单项,可以使用 React Router 的 useLocation 钩子来获取当前路径,并根据路径动态设置菜单项的高亮效果,本文给大家介绍了一个完整的示例,展示如何根据当前页面路由自动高亮顶部菜单项,需要的朋友可以参考下
2024-07-07
react 实现图片正在加载中加载完成加载失败三个阶段的原理解析
这篇文章主要介绍了react 实现图片正在加载中加载完成加载失败三个阶段的,通过使用loading的图片来占位，具体原理解析及实现代码跟随小编一起通过本文学习吧
2021-05-05
React中组件通信的几种主要方式
React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-10-10
react国际化化插件react-i18n-auto使用详解
这篇文章主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
ReactNative实现图片上传功能的示例代码
本篇文章主要介绍了ReactNative实现图片上传功能的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-07-07
React中state属性案例详解
在React中,state 是一个用于存储组件内部数据的特殊对象,每个React组件都可以包含自己的state,我们往往是通过修改state的值来驱动React重新渲染组件,这篇文章主要介绍了React中state属性,需要的朋友可以参考下
2023-11-11
React使用高德地图的实现示例(react-amap)
这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
react-router-dom v6版本跳转路径的实现方法
这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React中的路由嵌套和手动实现路由跳转的方式详解
这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转，主要是通过Link或者NavLink进行跳转的，实际上我们也可以通JavaScript代码进行跳转，需要的朋友可以参考下
2022-11-11
React创建组件的三种方式及其区别是什么
在React中,创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件,本文就详细的介绍一下如何使用,感兴趣的可以了解一下
2023-08-08