问题标签 [conditional-rendering]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
3869 浏览

javascript - 基于用户输入的条件渲染

我刚刚开始学习 React,并且正在为条件渲染而苦苦挣扎。我想根据表单输入呈现组件,但我不确定需要做什么或需要在哪里执行。

我已经导入了我的表单组件,该组件具有我想要使用的输入,并且还有另一个像这样的组件:

如果在提交表单时输入的值大于 X,我基本上希望能够显示某些卡片,但我不知道如何定位导入的组件。

这是我的表单组件:

任何帮助将不胜感激!

0 投票
3 回答
713 浏览

javascript - 在非常相似的组件的情况下,进行条件渲染的最佳方法是什么?

我根据用户是教授、学生还是未登录来呈现不同的登录页面。登录页面非常相似;唯一的区别是显示的按钮。我知道我可以使用内联条件或简单的 if-else 语句来解决这个问题。但是,我想知道在这种情况下实现条件渲染的最佳实践是什么。我知道高阶组件 (HOC) 可以提供帮助,但我不确定它们在这种特殊情况下是否过大。

为了在同一页面上,这里是我目前使用 if-else 语句呈现的不同着陆组件。

Landing.js(未登录用户):

LandingProfessor.js

LandingStudent.js

0 投票
1 回答
3276 浏览

javascript - Vue.js 中基于复选框输入的条件渲染

我正在尝试根据 Vue 中的用户输入有条件地呈现表单元素,但进展不顺利。我知道如何使用 VanillaJS 或 jQuery 来做到这一点,但我正在努力将这些知识转化为使用 Vue 的内置条件指令。我正在使用带有来自 vue-cli 的 webpack 模板的单文件组件。

从我的<template>

这完全破坏了页面的组件渲染。因此,我尝试根据 Vue 文档中的此页面使用 v-model 。https://vuejs.org/v2/guide/forms.html#v-model-with-Components

不幸的是,这也打破了页面。

我不完全确定如何从这里开始。我没有正确地考虑这一点吗?v-if/v-show 是否不打算与其他元素的输入一起使用?

0 投票
1 回答
208 浏览

vuejs2 - vuejs 在不同元素内渲染模板的一部分而不重复

我是 Vuejs 的新手。这是我需要做的。

我想要做的不是用 id x 定义 div 两次,因为它很大。

0 投票
2 回答
1861 浏览

javascript - React Native 中获取后的条件渲染

react native fetch 后如何进行条件渲染? 1.Successful fetch with the 2.Network request failed 3.If responseData there is empty responseDatafrom server 返回后我不想渲染组件

现在我只显示成功的结果。我也想显示失败的情况。如何在获取Text失败后渲染组件。以下是我的代码

0 投票
2 回答
537 浏览

javascript - 如何从唯一且不重复的对象映射项目

我正在制作一个电子商务反应本机应用程序,并且在应用程序的 CART 部分中,我希望添加到购物车中的具有相同 ID(您可以在控制台中看到的类别 ID)中的每个项目只呈现一次,但在我的情况下如果我在购物车中添加 3 个具有相同 id 的项目,我将看到 3 个不同的 listItems 他们尊重的项目。如果有多个具有相同 ID 且数量增加的项目,我希望我的地图功能显示 1 个列表项。到目前为止,我的代码只是将每个选定的产品呈现为一个单独的项目:

console.log 的结果如下 在此处输入图像描述

这就是我的购物车的样子 在此处输入图像描述

现在你可以看到购物车应该只显示一个具有相同产品的 listItem 数量=18

0 投票
0 回答
170 浏览

jsf - 根据行渲染渲染列

我有一个像这样的数据表:

如您所见,我有多个列显示变量的所有属性,如果满足条件,则显示在列中的图像。

警报图片

但是,不满足该条件会给我们一个带有空列的表格,我不想显示该表格。

空列

当所有行中都没有显示图像时,有什么方法可以隐藏该列?

0 投票
1 回答
84 浏览

reactjs - 有条件地渲染 DataSearch 组件

我已经使用 ReactiveSearch 组件构建了一个搜索 ui,效果很好!现在我试图弄清楚如何根据正在显示的路线/视图有条件地显示我在导航栏中拥有的DataSearch 组件。

例如在我的主页上。我在 jumbotron 中有一个大的 DataSearch 组件搜索表单,我不需要/想要也显示在导航栏中的 DataSearch 组件。

我已经看过这个这个,但我不确定如何在 ReactiveSearch 的 DataSearch 组件的上下文中实现这些。

更新

所以我一直在研究如何从 React Router (v4) 中获取 url,看来我可以这样做:

所以后来我想我可以使用类似的东西,location !== '/' && DataSearch但这不起作用。

0 投票
1 回答
359 浏览

reactjs - react-redux:在 API 调用后渲染组件

我正在构建一个使用用户输入并显示食谱数量的应用程序,他们也可以单击食谱卡来查看成分。每次他们点击配方卡时,我都会调用 API 来获取合适的配方成分。但我无法弄清楚如何显示包含配方成分的组件。我也尝试了条件路由和条件渲染,但找不到解决方案。

Recipe_Template.js

Recipe_Detail.js

0 投票
1 回答
2391 浏览

vue.js - 通过切换复选框 Vue.js 来切换属性

如果我解释得不好,请提前抱歉,我对此有点新手。

如果我有一个包含多个类似于下面的对象的数组,如何在 Vue 中取消选择/选择模式中的复选框以visible根据其名称切换属性的值?我只想显示具有可见性的项目。

目前,我有一个模式弹出窗口,它显示每个对象的名称属性以及一个复选框。当我取消选中/选中一个或多个名称旁边的文本框时,我希望根据visibility.

我正在想象逻辑是;如果未选中复选框,则将可见性设置为 false

下面的代码基本上是我要解释的内容的大纲,我知道它的语法并不完美,它更像是一个视觉指南,试图展示我在问什么。

再次,对不起,如果我解释得不好。

非常感谢您的帮助