如何在没有 2 个 if 语句的情况下在 JSX 中添加 If...Else 语句?
Posted
技术标签:
【中文标题】如何在没有 2 个 if 语句的情况下在 JSX 中添加 If...Else 语句?【英文标题】:How to Add If…Else Statements in JSX without having 2 if statement? 【发布时间】:2018-10-25 22:31:26 【问题描述】:我有两个用 ReactJS 编写的 if 语句。
if (videoUrl !== undefined && videoUrl !== null && videoUrl.indexOf('youtube') !== -1)
videoUrl = videoUrl.replace("watch?v=", "embed/")
if (videoUrl !== undefined && videoUrl !== null && videoUrl.indexOf('vimeo') !== -1)
videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
我不知道如何制作这些if else
声明,因此它可以在 youtube 或 Vimeo 之间进行检查。现在我只能使用一个 if 语句。如果我将两个 if 语句都留在该位置,则第一个 if 有效。
【问题讨论】:
你的逻辑需要 2 个 if 语句......所以,不知道你为什么认为你可以用一个来做到这一点 您是否尝试将第二个语句中的if
替换为else if
?
是的,您的问题没有得到很好的解释,是吗。你似乎说你不想要 2 if's ... 没有意识到你想要 more
【参考方案1】:
你不需要那么多if,只需检查字符串
let videoUrl = 'https://vimeo.com/';
if (typeof videoUrl === 'string')
if(videoUrl.indexOf('youtube') !== -1)
videoUrl = videoUrl.replace("watch?v=", "embed/");
if (videoUrl.indexOf('vimeo') !== -1)
videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
console.log(videoUrl);
// Another option is to use regex
videoUrl = 'https://vimeo.com/';
if (/youtube/.test(videoUrl))
videoUrl = videoUrl.replace("watch?v=", "embed/");
if (/vimeo/.test(videoUrl))
videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
console.log(videoUrl);
【讨论】:
if (videoUrl.includes('youtube'))
有什么问题:p
@JaromandaX String.prottype.includes()
并非所有浏览器都支持
所以?谁真的在乎 IE?无论如何它都可以填充:p
@JaromandaX 没错,但我更喜欢使用正则表达式 /youtube/.test(videoUrl)
通过包含我希望的 polyfill,@ZohaibIjaz ... String.prototype.includes = function(search, start) return !!~this.indexOf(search, start);
【参考方案2】:
就这么简单:
if (videoUrl !== undefined && videoUrl !== null)
if (videoUrl.indexOf('youtube') !== -1)
videoUrl = videoUrl.replace("watch?v=", "embed/")
else if (videoUrl.indexOf('vimeo') !== -1)
videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
这消除了重复检查,并且更易于阅读。除非您开始使用 ?:
运算符玩游戏,否则您无法使用单个 if
轻松做到这一点。
其实我们来玩游戏吧!
videoUrl = (videoUrl !== undefined && videoUrl !== null) ?
(videoUrl.indexOf('youtube') !== -1) ?
videoUrl.replace("watch?v=", "embed/") :
(videoUrl.indexOf('vimeo') !== -1) ?
videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/") :
null :
null;
或者类似的东西 - 现在 那个 是不可读的!
【讨论】:
【参考方案3】:我会这样写:
if (typeof videoUrl !== 'undefined' && videoUrl)
if (videoUrl.indexOf('youtube') !== -1)
//first case here
else if (videoUrl.indexOf('vimeo') !== -1)
//second case here
【讨论】:
typeof videoUrl !== 'undefined' &&
冗余以上是关于如何在没有 2 个 if 语句的情况下在 JSX 中添加 If...Else 语句?的主要内容,如果未能解决你的问题,请参考以下文章
如何在没有 IllegalMonitorStateException 的情况下在 Java 中使用等待和通知?
如何在没有插件的情况下在 Jquery 中格式化数字? [复制]
如何在没有jQuery的情况下在javascript中执行php文件