问题标签 [conditional-rendering]

我有一个目标是制作一个组件，它使用这样的嵌套 ul 标签呈现卡片： 从这样的数据中，这是通过来自父组件的道具传递的：

为此，我在嵌套 ul 应该开始的行的末尾设置标记，例如嵌套 ul 应该打开时的“：”和“。” 当嵌套的 ul 应该关闭时。但是要使这段代码正常工作，我需要渲染打开的，而不是关闭的标签。

任何帮助将不胜感激，我的截止日期很近，现在我真的被困在项目的最后一部分 - 这个。

I've done a conditional rendering statement within react.The condition that I'm checking is based on the server response. If the condition is met then I've to render some UI components otherwise a different UI. So the problem is what ever I'm getting from server, only the else portion is working.I've double checked the response also.

updated code

我有一个带有按钮的导航，它可以切换菜单和登录按钮。

当用户未经授权时，他只能看到登录按钮。当用户登录时，该按钮消失，他/她可以看到一个切换用户菜单的汉堡按钮。

我有一个基于属性的条件，该属性isLoaded可以为假或真，具体取决于 API 响应（登录后是否加载了配置文件数据）。它可以正常工作，但是当我重新加载页面并在登录过程后重定向到主页后，SignIn 按钮会出现片刻。我想知道如何避免这种情况。

我怀疑这个按钮是在应用程序等待 API 响应时显示的，一旦看到isLoaded: true，它会在检查条件后隐藏按钮。

这是我的代码：

我的店铺：

我的任务是删除项目中的所有内联 CSS。这是一个带有 sass 的 React 项目。我能够删除所有内联 css 并放入一个单独的“样式”目录，除了这个。我告诉我的老板我们可以保留它，因为它很小并且使代码更具可读性，但他坚持要删除它并在样式目录中放置一个单独的文件。
怎么做呢？任何和所有的帮助表示赞赏。

****这是代码****（这是来自组件文件的片段）

如何在具有超过 1 个条件的本机反应中进行条件渲染？

以下是我的代码的一部分

指数

但这里是针对单一情况的意思是如果responseData只包含一个字段。但现在 reponseData 包含 2 个数组。每个有 3 个对象。那么如何在这里检查条件渲染呢？我的 responseData 看起来像这样。我想在每种情况下填充一些 UI。这意味着if status = 1 && work_type ="plumber"然后渲染一些 UI。if status = 2 && work_type="electrical" && assigend_to="worker_45"然后再渲染一些ui 。那么我该怎么做呢？

请帮忙

在条件渲染或隐藏组件之间进行选择的实际方法是{ display: 'none' }什么？

为了便于讨论，假设我有一个FilterComponent包含title过滤器的 ，以及一个 、 和FilterItems的name列表amount。

简而言之，aFilterComponent可以是：

颜色

• 蓝色 (19)

• 黄色 (17)

• 橙色 (3)

• 黑色 (7)

• 绿色 (10)

  + Show More

按下Show More按钮时，FilterItem会显示更多的s，即

颜色

• 蓝色 (19)

• 黄色 (17)

• 橙色 (3)

• 黑色 (7)

• 绿色 (10)

• 棕色 (17)

• 粉红色 (88)

• 白色 (55)

• 红色 (32)

• 紫色 (17)

  - Show Less

我应该隐藏FilterItems 下面的 sShow More吗？或者我应该为下面的那些返回 null 并在用 更新状态后渲染它们Show More？

你好，我想做的只是一个简单的条件渲染，我之前在 react 中做过，但我似乎无法在 preact 中做到。

正如您在底部看到的那样，我只是尝试在 showEntryDetails 上使用 if 但在这里我收到一条错误消息“预期表达式”我认为这是一个打字稿错误但我不知道为什么它不会让我有一个 if 存在。谁能向我解释为什么以及是否有办法做我想做的事？

编辑 1（初始）： setState() 回调似乎没有按我期望的方式工作。例如：

当我希望它注销错误时，将注销“真”。

编辑2：我认为我处理下拉请求的方式有问题，这可能导致我的大部分问题。所以我将把它标记为已解决，因为 Dileep 的解决方案应该有效。我将在几个小时内更新我的结果。

编辑 3（最终）：我使用的是 switch() 语句，它以某种方式触发了多个案例并重置了我的状态。

我想我明白问题是什么，但是，我不完全确定如何解决它。

我想有条件地渲染一个元素，然后才能被 Amchart 的 create("elementID", chartType) 函数访问。我希望通过调用以下函数在下拉列表中呈现：

barChartDiv 显示如下：

当我选择下拉时，我被告知 barchart 为 false，然后在出现以下错误后为 true：

因为 setState() 通常不会立即更新。我已经尝试通过在 setState() 回调函数中包含 loadBarChart() 代码来解决这个问题，但我得到了与以前相同的错误。所以我几乎可以肯定正在发生的是 am4core.create() 在呈现该元素之前正在寻找一个 id 为“barChartDiv”的元素，所以我得到一个 html container not found 错误。

除了使用 css 之外，处理这个问题的最佳方法是什么？

我根据沙盒链接创建了一个表单：https ://codesandbox.io/s/rlmv6ojjyn

在 SOW Type 部分有三个复选框。单击复选框时，用户可以访问更多选项（尚未创建这些选项，但第一个选项将需要一组下拉菜单，第三个选项公开一个新复选框（单击第一个），它将（单击）然后将公开一些文本框供用户提交文本。

根据'SOWType.js'（如下所示）中的代码，我已经到了这一点，它是'PdfGenFormContainer.js'的子级。

我有一个对象“componentList”（在 SOWType.js 内），它与条件渲染一起使用，以在相关复选框选择上显示相关子组件）

我的问题是，如何将这些子组件中的用户选择包含在状态中。对象“componentList”在子组件中，那么这一切如何与父组件中的状态通信？（所以提交表格时都包括在内）？。'componentList' 是否需要以某种方式坐在父级中？（这将如何工作？）

我唯一的选择是使用 redux 来完成这项工作，还是可以简单地在 React 中完成？

SOWType.js：

我试图从ReactiveBase有条件地渲染我的 Results 组件，但是每次我尝试使用三元运算符时，它都会破坏渲染。如果我删除三元，结果显示。

我正在使用该<ReactiveList>组件在我的结果组件中显示结果。

我只想在用户实际提交搜索查询时显示结果。那么，如何在用户提交查询后才从内部有条件地呈现结果组件

到目前为止，这是我的代码：