问题标签 [conditional-rendering]

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

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

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

这是我的表单组件：

任何帮助将不胜感激！

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

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

Landing.js（未登录用户）：

LandingProfessor.js

LandingStudent.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 是否不打算与其他元素的输入一起使用？

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

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

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

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

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

console.log 的结果如下

这就是我的购物车的样子

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

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

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

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

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

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

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

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

更新：

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

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

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

Recipe_Template.js

Recipe_Detail.js

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

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

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

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

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

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

非常感谢您的帮助