在 React 中定义空 dom 元素的正确方法

2024-01-06

我发送一个可选参数checkbox在组件的 prop 内:

var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;

然后我这样说:

<div>
    ...
    {checkBox}
    ...
</div>

从上面可以看出,我将 null 分配给变量。但我可以改为分配空字符串''这似乎给出了相同的结果。

什么才是合适的呢?


您需要使用 null。如果你使用像 '' 这样的空字符串,那么 React 会创建一个空的 span dom 元素,所以它是不一样的。

var label1 = <label>My Label</label>; // react generates a label element
var label2 = null; // react doesn't generate any dom element
var label3 = ''; // react generates and empty span like <span></span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 React 中定义空 dom 元素的正确方法 的相关文章

  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 是否可以在 React Native 中隐藏“BugReporting extraData”? (使用世博会)

    每次我使用 Expo 打开 React Native 应用程序时 我都会在控制台中收到大量消息 其中包含有关该应用程序的元数据 这实际上对我的调试没有多大帮助 特别是因为它每次都是相同的信息 并且每次应用程序重新加载时都会显示 即使是热重新
  • 如何获取没有背景的元素颜色?

    如何有效地获取没有背景但其父级之一有背景的元素的颜色 例如 这是 3 级深度设置 TOP1 为红色 TOP2 为绿色 TOP3 没有定义背景颜色 但它是绿色的 我编写一个函数来通过父母进行 iretate 并查找 backgroundCol
  • 如何清除 THREE.JS 场景

    我正在尝试找到清除场景中所有对象而不破坏场景本身的方法 我知道命名对象是一种方法 然后当我们想要删除该对象时 我们只需通过它的名称 获取 它即可 但是 我想找到一种快速方法来清除场景中的所有对象 无论它们的名称如何 有简单的方法吗 谢谢 你
  • NodeJS:调用 global.gc() 不会将内存减少到最低限度?

    为了调查内存泄漏 我设置了一条触发的路线global gc 在每个POST gc app post gc function req res global gc 但是 我注意到 如果我发送垃圾邮件此请求 每次都会越来越多地减少内存使用量 不应
  • 在多个按钮中调用相同的 jQuery 函数

    我对 jQuery 不太熟悉 我下载了这段代码来创建淡入 淡出弹出表单 这是代码
  • 三个 JS Orbitcontrols 设置目标而不用 LookAt

    我正在尝试制作一个用于构建模型的 3D 查看器 我们已加载模型并尝试与模型进行某种交互 因此 我们使用 OrbiControls 来旋转 平移和缩放模型 我们希望在查看器中具有这样的行为 当用户单击并拖动 从而旋转 时 旋转中心位于用户单击
  • 使用 React Hook 将更新器传递给以“(state, props)”作为更新状态参数的“setState”相当于什么?

    替代使用的最佳实践是什么setStateReact Component 中的函数 https reactjs org docs react component html setstate https reactjs org docs rea
  • 有谁知道在 Angular 2 应用程序中使用的简单日期选择器?

    有谁知道在 Angular 2 应用程序中使用的简单日期选择器 我似乎无法让 jquery ui datepicker 工作 有谁知道一个容易实施的方法 我尝试过 html date 但它不适用于所有浏览器 我正在使用带有 html5 和
  • 将经常使用的小型 jQuery 插件附加到 common.js 文件的末尾是否被认为是不好的做法或不道德?

    我的很多 jQuery 项目都使用子菜单 我坚信使用悬停意图 http plugins jquery com project hoverIntentjQuery 原生插件hover http api jquery com hover 出于可
  • 如何正确使用react-router-dom中的useHistory()?

    如何使用useHistory 正确吗 我无法从一个反应组件过渡到另一个反应组件 根据 React 文档以及 Stack Overflow 上的说明 我无法从 App js 转换到 MyComponent js 例如 我正在尝试 App js
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 当数据 uri 太大时“噢,啪”

    我正在编写一个 chrome 扩展 它执行以下操作 使用以下命令将文件从网站下载到内存XMLHttpRequest 将附加数据添加到文件中 然后将结果进行 Base64 编码到变量中total encoded data 使用以下方式向用户提
  • 通过字符串键/路径生成嵌套对象结构

    我想做一个名为createAssociativeArray它将接收两个参数 string and object 像这样 function createAssociativeArray string object 最后一项string应该得到
  • 我将如何将 localStorage 与 Object 一起使用

    请有人能说清楚为什么我需要这样做JSON stringify localStorage setItem data 然后使用JSON parse localStorage getItem data 在我可以取回我的数据对象之前 简而言之 因为
  • 卸载后 Web 应用程序不显示“添加到主屏幕”

    这是我第一次创建网络应用程序 我设法解决了这个问题 所以我得到了实际的 chrome 提示 将其添加到主屏幕 然后我从手机上卸载了该网络应用程序 因为我想将其展示给我的同事 但是 屏幕上不再出现提示 问题 这是有意为之的行为还是我的应用程序
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注

随机推荐

  • 多行 python 正则表达式

    我有一个结构如下的文件 A some text B more text even more text on several lines A and we start again B more text more multiline text
  • 解析文本最快的方法是什么?

    假设我想提取在某个文本文件中找到的给定字符串后面的第一个单词 或浮点数 请参阅如何提取字符串后面的第一个单词 https stackoverflow com questions 3549877 how to extract the firs
  • 线程同步 - 同步三个线程打印 012012012012..... 不起作用

    我正在尝试同步三个线程来打印 012012012012 但它无法正常工作 每个线程都分配有一个数字 当它收到来自主线程的信号时 它将打印该数字 以下程序有问题 我无法发现 public class Application public st
  • 多平台C++交叉编译器

    如何为 C 库构建交叉编译器以在单个构建服务器上针对多个平台 交叉编译器应该能够为 至少 Windows 7 Mac OS X Ubuntu 11 04 32 位 64 位 调试 发布 构建库 我不在乎从头开始的整个构建是否需要永远 或者是
  • -framework Accelerate,其中包含

    我正在尝试编译别人的代码 但没有简单的头文件 我需要链接 osx 上的默认 lapack 和 blas 库 经过一番搜索后我发现它们位于 Accelerate 框架中 在我的 make inc 中我使用了类似的东西 LAPACK LIBS
  • Handlebars-template 中元素的 Onclick 功能

    我正在使用 Handlebars js 和一些 jQuery 构建一个简单的 Web 应用程序 现在我有一个数据列表 并通过 Handlebars 模板呈现它们 然后我想要一些与这些相关的操作 例如更新一个元素 或者删除一个元素 我有与这些
  • Android - 完全从 xml 创建列表视图

    我想在我的申请中提出一些选择 现在我正在用一个一个的按钮来做这件事 我真正想做的是将它们呈现为一个列表 就像 设置 应用程序中一样 这归结为创建一个包含预定义值 选择的列表 我的问题是我不知道如何使用 xml 来做到这一点 我可以像这样将
  • ReactJS:如何将一个组件覆盖在另一个组件的元素之上?

    我才刚刚开始反应 我有一个带有输入字段和按钮的组件 还有另一个组件返回 JSX 一个闪烁的点 我正在主组件中导入闪烁点组件 并希望在输入字段为空时将闪烁点覆盖在输入字段的顶部 我怎样才能实现这个目标 请帮助我 其代码可以在以下位置找到 ht
  • For 循环总是至少执行一次吗?

    据我的老师说 即使不满足条件 for 循环也总是至少执行一次 示例 就像我从 C 中知道的那样 for int i 6 i lt 5 i irrelevant for this question 据她说 这个循环至少会执行一次 但它没有执行
  • Android 仅当 RecycleView/List 大于屏幕时才 setStackFromEnd

    我有一个 RecyclerView 我想开始显示底部项目 所以我使用 myLayoutManager setStackFromEnd true 当有足够的项目填满屏幕时 它的工作方式正如我想要的那样 但是如果 RecyclerView 中只
  • Guid 作为 RavenDB 中的 Id

    The RavenDb 文档 http ravendb net docs client api basic operations saving new document状态 支持数字或 Guid Id 属性 并且可以无缝工作 在这种情况下
  • 将我的图像置于 ul li div 中心

    我在页脚中放置了一张图像 我希望它居中 但我不会工作 我希望我的图像居中 所以我希望有人可以帮助我看看我的代码 HTML div class center ul li a href target blank class centering
  • VS2019 Xamarin Forms 远程 IOS 模拟器黑屏 - 如何修复?

    Xamarin 表单项目微软 Visual Studio 2019 版本 16 9 Mac 上的 Xcode 版本 12 4 使用运行14 4的iPad Pro 11英寸作为模拟设备和IOS版本 我尝试过其他模拟器 如果我在 Mac 上构建
  • 为什么我的 Rails 初始化程序在控制台中缓存 ENV 变量(Foreman、Dev env)

    起初的小烦恼现在变成了令人头痛的事情 我正在构建一个 Rails 4 应用程序 并使用 Foreman 进行开发设置 并使用 Procfile 和 env 文件进行配置 当我在 env 文件中设置 ENV 变量时 我的应用程序会正确拾取它
  • 将输出从 terraform 传递到 Azure Devops Pipeline,并在 azure 后端存储中使用状态文件

    我似乎无法检索 Terraform 的公共 IP 地址输出以用于 AzureDevops 中构建管道的下一步 Terraform 状态拉动工作并输出到 json 文件 无法对输出进行 grep Terraform state show op
  • Instagram 如何在故事中嵌入可点击的文本?

    我正在尝试在我的 Android 应用程序中实现类似 Instagram 的故事功能 我可以在图像上制作文本叠加 但如何使它们可点击 如上面的屏幕截图所示 Thanks 尝试使用clickable span with SpannableSt
  • 通过重新压缩 APK 内容来减小其大小

    我有一个相当大的 apk 文件 我正在尝试减小它的大小 已经使用了所有常用技术 例如 Proguard 和图像压缩 尽管如此 该 apk 仍然很大 大约 25mb 维基百科 http en wikipedia org wiki APK fi
  • 使用 libstdc++ 编译库与 clang++ -stdlib=libc++

    我在 Mac OS X 10 8 2 下使用 C 工作 最近需要使用 C 11 功能 这些功能可以通过使用 libc stdlib 的 clang 编译器获得 但是 我还需要使用一些针对 libstdc 来自 MacPorts 编译和链接的
  • SpriteKit 侧向滚动不会更新物理世界

    遵循示例here https stackoverflow com questions 24748247 define map bounds and center on player node 24843989 24843989 除了 Obj
  • 在 React 中定义空 dom 元素的正确方法

    我发送一个可选参数checkbox在组件的 prop 内 var checkBox this props checkbox span span null 然后我这样说 div checkBox div 从上面可以看出 我将 null 分配给