禁止在JSX中使用多行JS表达式
在JSX中使用多行JS表达式是不被推荐的做法，因为它会导致代码的可读性和可维护性下降。JSX是一种将JavaScript和HTML结合的语法扩展，它的目的是提供一种更直观、更易于理解的方式来描述用户界面。
在JSX中，我们可以使用大括号{}来包裹JavaScript表达式，以在HTML标签中插入动态内容。然而，由于JSX的语法限制，我们不能在大括号内使用多行JS表达式。
如果我们需要在JSX中使用多行JS表达式，可以通过以下几种方式来解决：
- 将多行表达式拆分为多个单行表达式：将多行表达式拆分为多个单行表达式，并将它们放在一个数组中。然后，可以在JSX中使用这个数组，并使用.map()方法将每个表达式渲染到相应的位置。
- 使用自定义函数或组件：将多行表达式封装在一个自定义函数或组件中，然后在JSX中调用该函数或组件。这样可以将复杂的逻辑封装起来，提高代码的可读性和可维护性。
- 使用模板字符串：将多行表达式放在模板字符串中，并将整个模板字符串作为一个表达式插入到JSX中。这样可以保持代码的整洁性，但需要注意模板字符串中的转义字符和变量插值。
需要注意的是，无论使用哪种方式，都应该尽量保持代码的简洁和可读性。如果多行表达式过于复杂，建议将其拆分为更小的函数或组件，以提高代码的可维护性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（云原生、后端开发）：https://cloud.tencent.com/product/scf
- 腾讯云数据库（数据库）：https://cloud.tencent.com/product/cdb
- 腾讯云服务器（服务器运维）：https://cloud.tencent.com/product/cvm
- 腾讯云音视频解决方案（音视频、多媒体处理）：https://cloud.tencent.com/solution/media
- 腾讯云人工智能（人工智能）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（物联网）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储（存储）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（区块链）：https://cloud.tencent.com/product/baas
- 腾讯云虚拟专用网络（网络通信、网络安全）：https://cloud.tencent.com/product/vpc
相关·内容
1回答
我使用tslint检查我的react typescript应用程序。我创建了它，并且它可以工作，但是我从tslint得到了这样的信息：“JSX中的多行JS表达式是被禁止的”。
浏览 22提问于2019-12-17得票数 0
我希望确保VS代码中的JavaScript文件(带有js扩展名)只包含有效的JavaScript语法。
有没有可能在VS代码中禁止.js文件的JSX语法？当然，在理想情况下，我仍然希望允许.jsx文件使用JSX语法。
浏览 1提问于2018-07-18得票数 0
几天前，我问过如何将JS放在JSX中。然而，我想在这里问一下相反的问题。是否有可能将JSX放在JavaScript中？显然，它确实有效，如下代码所示.但我很困惑为什么！`{}`
// But why does `<p>Age: 25</p>` JSX
浏览 5提问于2020-08-19得票数 0
回答已采纳
13回答
如何在React组件中使用render方法中的注释？Button> </div> }
我的评论出现在UI中。在组件的呈现方法中应用单行和多行注释的正确方法是什么？
浏览 33提问于2015-06-10得票数 317
回答已采纳
ReactJS文档提供了一些有趣和强大的东西，说明了他们的JSX能够做到什么：
这对我来说是如此强大和有趣，因为这在AngularJS和EmberJS中是不可能的。角在标记中使用角表达式，EmberJS在标记中<em
浏览 1提问于2018-02-09得票数 4
回答已采纳
span>}我不理解以下部分： <span> </span>}
我们可以在{}中使用jsx吗？在这里，<span>在{}中使用。我以为只使用javascript变量或表达式？
浏览 3提问于2017-11-24得票数 0
回答已采纳
1回答
默认情况下，Vite不允许在.js文件中使用JSX语法。✘ [ERROR] The JSX syntax extension is not currently enabled
122 │ return
浏览 107提问于2022-11-29得票数 0
我有此配置，以便为web-mode文件启用.jsx文件。(add-to-list 'auto-mode-alist '("\\.jsx$" . web-mode))上面写着：
但我不想指定文件路径。我想联系内容类型使用小型缓冲区或更好的自动检测。
浏览 0提问于2015-06-24得票数 0
我有多行参数和单体返回的函数(因为它们很长)。': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], }, },我使用VSCode和格式，并在保存时使用</
浏览 5提问于2020-08-10得票数 0
回答已采纳
我遵循以下两个示例来设置Nextjs + Tailwindcss + Antd项目：
我可以在没有问题的情况下yarn dev，但是当我尝试yarn build和yarn start编辑：我发现当我删除postcss.config.js中的清除css插件时，问题就解决了。因此，问题是清除css清除所有外部css文件时，yarn build。如何更新postcss配置？
浏览 5提问于2020-04-24得票数 5
我参考了，上面说{}：巴什式支撑展开。{js,jsx,ts,tsx,json,css}": [ "eslint --fix src/",
"tslint+(js|jsx|ts|tsx|json|css)&q
浏览 1提问于2020-10-21得票数 2
回答已采纳
它抱怨说，如果我有一个不是测试套件的文件，它就不存在于我创建的__test__/目录中(参见下面)。这基本上意味着该文件夹中的所有内容(包括子文件夹)都必须是测试套件。
我怎么才能避开这一切？
浏览 0提问于2019-02-01得票数 15
1回答
设置Jest测试JSX文件
、、、、
我正在尝试设置Jest来测试一个简单的JSX文件，但是我一直收到以下错误。My应用程序使用Babel和Webpack将JSX文件传输到JS。Jest在测试常规.js文件时工作得很好。在尝试遵循一系列解决方案线程之后，有一个babel.config.js和一个.babelrc文件。我正在WSL2上运行Ubuntu。(js|jsx)$/, exclude: /node_modules/, l
浏览 1提问于2020-03-15得票数 2
回答已采纳
18回答
与webstorm不同，我无法在Visual Studio Code的.js文件中注释掉JSX代码。
浏览 20提问于2016-07-20得票数 82
1回答
我想知道如何为这种情况创建正则表达式。例如，我得到了这些语句。char * achar *a2*2我试着忽略"chars“，但由于长度固定，它不适用于更多的空格。
浏览 5提问于2014-03-16得票数 0
<BigItem data={item}/> : null} )
为什么这段代码能工作，但如果我使用，如果或切换语句，它就不会工作了？
浏览 2提问于2017-10-08得票数 2
回答已采纳
如何在现有SolidJS元素的SolidJS道具中进行扩展，并在下面的示例中创建与此ButtonProps接口类似的自定义接口，以便作出反应。
浏览 21提问于2022-05-05得票数 3
回答已采纳
1回答
onClick} selectedKeys={[current]} mode="horizontal" items={items} />};
我使用的是
浏览 2提问于2022-06-22得票数 0
我有一个名为Navbar.jsx的表示组件，它根据用户是否经过身份验证返回另一个表示组件。当我运行webpack时，我的if语句中的"if“是一个意外的标记，这是一个错误。以下是Navbar.jsx：import PreAuthNavTabs from '.
浏览 3提问于2016-06-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
