问题标签 [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.
javascript - 基于用户输入的条件渲染
我刚刚开始学习 React,并且正在为条件渲染而苦苦挣扎。我想根据表单输入呈现组件,但我不确定需要做什么或需要在哪里执行。
我已经导入了我的表单组件,该组件具有我想要使用的输入,并且还有另一个像这样的组件:
如果在提交表单时输入的值大于 X,我基本上希望能够显示某些卡片,但我不知道如何定位导入的组件。
这是我的表单组件:
任何帮助将不胜感激!
javascript - 在非常相似的组件的情况下,进行条件渲染的最佳方法是什么?
我根据用户是教授、学生还是未登录来呈现不同的登录页面。登录页面非常相似;唯一的区别是显示的按钮。我知道我可以使用内联条件或简单的 if-else 语句来解决这个问题。但是,我想知道在这种情况下实现条件渲染的最佳实践是什么。我知道高阶组件 (HOC) 可以提供帮助,但我不确定它们在这种特殊情况下是否过大。
为了在同一页面上,这里是我目前使用 if-else 语句呈现的不同着陆组件。
Landing.js(未登录用户):
LandingProfessor.js
LandingStudent.js
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 是否不打算与其他元素的输入一起使用?
vuejs2 - vuejs 在不同元素内渲染模板的一部分而不重复
我是 Vuejs 的新手。这是我需要做的。
我想要做的不是用 id x 定义 div 两次,因为它很大。
javascript - React Native 中获取后的条件渲染
react native fetch 后如何进行条件渲染? 1.Successful fetch with the 2.Network request failed 3.If responseData
there is empty responseData
from server 返回后我不想渲染组件
现在我只显示成功的结果。我也想显示失败的情况。如何在获取Text
失败后渲染组件。以下是我的代码
reactjs - 有条件地渲染 DataSearch 组件
我已经使用 ReactiveSearch 组件构建了一个搜索 ui,效果很好!现在我试图弄清楚如何根据正在显示的路线/视图有条件地显示我在导航栏中拥有的DataSearch 组件。
例如在我的主页上。我在 jumbotron 中有一个大的 DataSearch 组件搜索表单,我不需要/想要也显示在导航栏中的 DataSearch 组件。
我已经看过这个和这个,但我不确定如何在 ReactiveSearch 的 DataSearch 组件的上下文中实现这些。
更新:
所以我一直在研究如何从 React Router (v4) 中获取 url,看来我可以这样做:
所以后来我想我可以使用类似的东西,location !== '/' && DataSearch
但这不起作用。
reactjs - react-redux:在 API 调用后渲染组件
我正在构建一个使用用户输入并显示食谱数量的应用程序,他们也可以单击食谱卡来查看成分。每次他们点击配方卡时,我都会调用 API 来获取合适的配方成分。但我无法弄清楚如何显示包含配方成分的组件。我也尝试了条件路由和条件渲染,但找不到解决方案。
Recipe_Template.js
Recipe_Detail.js
vue.js - 通过切换复选框 Vue.js 来切换属性
如果我解释得不好,请提前抱歉,我对此有点新手。
如果我有一个包含多个类似于下面的对象的数组,如何在 Vue 中取消选择/选择模式中的复选框以visible
根据其名称切换属性的值?我只想显示具有可见性的项目。
目前,我有一个模式弹出窗口,它显示每个对象的名称属性以及一个复选框。当我取消选中/选中一个或多个名称旁边的文本框时,我希望根据visibility
.
我正在想象逻辑是;如果未选中复选框,则将可见性设置为 false
下面的代码基本上是我要解释的内容的大纲,我知道它的语法并不完美,它更像是一个视觉指南,试图展示我在问什么。
再次,对不起,如果我解释得不好。
非常感谢您的帮助