问题标签 [conditional-rendering]

我正在使用条件运算符来确定是否应该在我的 React 组件中包含一个额外的元素。出于某种原因 if product.ratingis 0 我看到它在名称之后呈现。如果我将值类型转换为布尔值，就像Boolean(product.rating)0 一样消失了。我的问题是为什么首先呈现 0，假值不应该将条件评估为假吗？

我想在 React 组件中执行以下操作：

是否可以在 React 中使用多个布尔值来有条件地渲染组件？这有可能向用户呈现布尔值吗？

谁能帮我弄清楚为什么我的组件在调度后没有更新？

只是来自 Redux 商店的简单条件渲染，我希望显示额外的 div 以通知用户他已通过身份验证，但它不会渲染。

Redux 异步教程中的 AsyncApp 示例中使用了这种类型的条件渲染示例，所以我不确定为什么它不起作用。我的动作被调度，reducers 成功更新状态，将其传递给连接的组件。这是我的减速器：

有谁知道为什么我的组件不重新渲染？

我的反应应用程序中导入了四个组件。我如何有条件地渲染其中一个组件（基于道具）。这就是我想要做的

我正在寻找一种解决方案来React根据用户的操作系统有条件地呈现内容。

例如。我有一个简单的组件，它显示键盘快捷键以与我正在使用的另一个组件进行交互。Windows在这种情况下，和的键盘快捷键Linux旨在显示ctrl + [action]. 但对于MacOS它需要显示cmd + [action]。

这是我的组件：

让我们<strong>ctrl + click</strong>从中吸取教训。

我想要的是有这样的东西：

我将如何做到这一点？一直在努力寻找获取用户操作系统的方法。

使用的技术：

JSF 2

素面

问题陈述 ：

我们有一个下拉列表如下 -

如果用户选择项目 2，则会显示一个按钮，单击该按钮会打开一个弹出菜单。如果用户选择项目 1 或 3 或 4 ，则会显示另一个按钮，该按钮在单击时触发业务操作。

我们能够获得 AJAX 调用以h:selectOneMenu使用f:ajax. 我们正在使用render的属性f:ajax

这工作正常。

问题是如何在 AJAX 响应上设计两个按钮。

不使用 JSTL 的方法之一：

where#{bean.render}将检查单击的项目的值并返回真/假。

使用 JSTL 的方法二：

将两个按钮包裹在同一个 panelGrid 中并仅渲染 panelGrid。在 panelGrid 中使用 JSTL 来控制渲染。

我在互联网上搜索过，似乎方法一种更正确，因为不建议在 JSF 中使用 JSTL 来控制渲染。

但问题是：

当只使用一个命令按钮时，我们最终会创建两个命令按钮。

另外，如果两个命令按钮只需要一个 id 怎么办。那是任何时候都应该在场的唯一一个。

请指教

我的主要目标是如果用户在 firebase 中没有个人资料，则有条件地呈现“创建个人资料”按钮，如果用户有个人资料，则有条件地呈现“编辑个人资料”按钮。

我没有呈现编辑配置文件按钮的问题。我通过将身份验证用户“uid”与配置文件的“uid”进行比较来检查用户是否有配置文件。如果它们匹配，则将呈现编辑按钮。

我的问题是，当编辑按钮呈现时，创建按钮仍然出现，但它应该消失，因为我有条件地呈现这两个按钮。

我在这里想念什么？

编辑 2018 年 3 月 23 日

我已经解决了问题，但我仍然没有解决方案。问题是 map 函数正在循环通过“配置文件”数组并正在寻找一个等于登录用户“uid”的“uid”。

但是，如果“uid”与登录用户“uid”不匹配，则创建按钮仍将呈现，因为“配置文件”数组中的其他配置文件的 uid 不等于登录用户“uid”。

所以我想我的另一个问题是，

如何检查登录用户是否在数组和/或 Firebase 数据库中没有数据？

这是我的代码：

我有一个名为“配置文件”的数据库，我从中提取信息。

}

反应组件：

我想要一个带有类别列表的侧边菜单，当用户选择一个类别时，它应该打开一个可滚动列表，位于类别名称的正下方，其中包含该类别的所有部分。

所以我创建了两个列表组件，一个用于类别（SideMenuList），一个用于家具。我想当用户选择类别时，我需要使用条件渲染来渲染第二个列表。

我的代码：

来自 app.js 的侧边菜单代码

SideMenuList.js

SideMenuItem.js 代码

我现在的问题是我的 onPress 事件没有改变我的状态属性“hideList”的值，所以我什至无法检查我的解决方案是否真的有效。当值为 true 但它从未出现在我的控制台中时，我正在做一个控制台日志。

提前致谢。

我对 React 有点陌生，并且一直在通过使用本文中指定的枚举渲染方法创建应用程序来练习。

但是，我试图以与文章所讨论的方式略有不同的方式应用它，更具体地说，使用它来有条件地渲染我的所有网站，除了<Nav />基于lastLinkClicked状态的网站。对于 WEB_PAGES 对象中列出的每个条件，我都有不同的页面类。

也许我误解了这种方法，因为我对枚举没有太多经验，但我的页面没有正确呈现。这是我的代码：

为了简洁起见，我删除了一些代码。我在此设置中遇到的错误是TypeError: Cannot read property 'state' of undefined针对 WEB_PAGES 对象下的主页。

我最初认为它this指向 WEB_PAGES 对象，但更改this为App显示它state也是未定义的。我现在不确定该怎么做。

枚举条件渲染方法在这种规模上是否可行？如果不是，还有什么其他方法最适合这种情况？非常感谢！

更新：2018-05-23

所以，这不能被复制的原因是，我删除了代码的某些部分（与项目相关的东西），这些部分实际上是问题的一部分。

1) 我在这个项目中使用 react-router (react-router-dom) 并通过添加一个 lib ([lib] 内部的部分.flowconfig) 添加了一些流兼容性，我在其中进行第三方模块定义。

文件四react-router：

2) 条件渲染包括来自 React-Router 的组件：

因此，流在这种情况下会停止正常工作。

它不是由字符串模板的使用引起的，也不是由作为属性的使用引起的，它连接到“flowtype-mock-module”。

将流类型定义更改为此没有帮助。还是同样的问题

使用 flowtype 并做出反应，我经常安静地面临以下问题。您将如何解决它，或者是否有任何最佳实践来处理以下情况？

反应状态的类型定义：

和条件渲染场景：

现在 flow 会告诉我，我无法访问 null 的 id 属性，但“某物”实际上永远不会为 null，因此它必须是 SomeType 类型。

运行流程将导致类似：