问题标签 [conditional-rendering]

我有一个标题，当鼠标悬停在标题上时，我想在其右侧显示一个图像。

• 我在设置为 true/false 的状态下维护一个变量editMode

• 然后我使用 onMouseOver 和 onMouse 事件有条件地渲染图像。

现在，当我将鼠标悬停在标题上时，编辑模式设置为 true 并显示图像，当我将光标移出标题时，editMode 设置为 false 并且图像消失。

我在设置为真/假的状态下维护一个变量editMode，有条件地使用onMouseOver和onMouse渲染图像：

问题：当我将鼠标悬停在编辑图标上时，它开始闪烁。

你可以在这里找到这段代码：http: //jsfiddle.net/Lu4w4v1c/2/

我该如何停止这种闪烁。我也尝试过按照这里的建议使用 onMouseEnter 和 onMouseLeave ，但它没有用。我不知道如何使用这两个事件导致与我想要的相反。第一次加载组件时，一切都很好，但只要我将鼠标悬停在图标上，整个动态就会发生变化。当鼠标不在标题上时图标显示，当鼠标在标题上时不显示。请帮忙

带有 onMouseEnter 和 onMouseLeave 的代码在这里：http: //jsfiddle.net/Lu4w4v1c/3/

我有自己的领域类扩展了 AppservPasswordLoginModule 和 AppservRealm，我从我自己的数据库表中获取用户和角色。在 web.xml 中，我定义了对页面的访问，它可以工作。我有一些机制可以使用 @SessionScoped 注释从我的 bean 中的 menu.xml 文件中读取主菜单。我想使用 web.xml 中的规则来仅显示用户有权访问的这些项目（在 web.xml 中定义），而无需在我的 menu.xml 文件中重复配置。我想解决方案可能是在我的 SessionScoped bean 中为此页面创建菜单项时检查对页面的访问，但我不知道如何轻松检查它。这种情况的最佳解决方案是什么？我正在使用 glassfish 4.1 和 jsf 2.2。

我遇到了一个简单的占位符应该被另一个等待异步数据的组件替换的情况。当数据可用时，正在渲染依赖组件。例如，想象一个加载微调器/骨架，然后将其替换为用户列表。

问题是，占位符应该在 1 帧内被替换，以便组件的整体高度不断保持。情况并非如此，因为渲染需要一些时间，这会导致弹跳效果。

以下片段作为简化示例给出：

在我的某些情况下，替换需要 50-150 毫秒，这使得页面高度反弹。

有什么解决办法吗？

我在渲染模板时遇到问题

添加新数据时，即使条件都为 TRUE，也不会进入 v-if 的过程。

有人可以解释一下为什么吗？

我在下面提供了一些屏幕截图以进一步解释我的问题

第一张图片是我展示产品的模板，你会注意到这里的添加、更新和删除。

第二张图片显示我正在尝试添加新产品

第三张图片显示我已成功添加新产品。问题是，操作按钮“更新”被触发但不会生效。

上图显示更新按钮适用于过去的数据，但不适用于新数据。

最后一张图片将证明按钮已被触发。我添加了一个 console.log 以在单击更新按钮时显示以下内容。

1. 行的索引，即 [0]。
2. 变量 'isUpdate' [boolean] 的类型。
3. 'isUpdate' 的值 [True, False]
4. 和 productID 是 [151]

知道为什么它没有被触发，或者知道如何调试它？

如果你想看代码。我可以提供，只要告诉我你要找哪一部分。因为我不知道哪个部分有错误。

先感谢您。

更新

按照 Amresh Venugopal 的要求

这是模板中的 v-if

和 updatebtn 功能

如果“false”，我只将 isUpdate 值设置为“true”，反之亦然。

productID 是在 ajax 保存函数之后添加的。

我想根据用户输入渲染组件的次数。例如，我有一个问题，询问您要创建多少个框，旁边有一个文本框，您可以在其中提交一个数字。无论该数字是多少，我都想在屏幕上渲染该框的次数（假设我在另一个文件中创建了一个框）。我该怎么做呢？我是在我的 Box.js 文件（如下）还是我的组件所在的 App.js 文件中执行此操作？我需要一个简单而详细的解释，因为我是 React 新手。

我使用 Bootstrap React 的代码：

};

我正在创建一个 React 组件来管理用户输入。这个组件，UserInput.js，有以下方法，

renderOrigin - 显示一个表单组件，

renderCities - 使用不同的道具显示相同的表单组件，

renderAddCitiesQuestion - 呈现两个按钮（是或否），由以下人员处理，

handleContinue - 使用“继续”问题的答案设置状态

getChildSate - 设置子组件接收到的状态（如表单）

render - 基于状态的条件渲染。State 具有布尔属性，“start”（用于第一次渲染）、“rendercities”和“renderQuestion”。

条件的流程如下。首先，state.start 为 true，我们调用 renderOrigin；然后，state.start 变为 false，state.renderCities 变为 true，我们调用 renderCities()；然后，state.rendercities 变为 false，state.renderQuestion 变为 true，这使我们调用 renderAddCityQuestion()；现在有两种可能，要么用户单击 No 按钮，我们不应该渲染，要么他单击 Yes 并且 state.renderCities 变为 true（并且 state.renderQuestion 变为 false）调用 renderCities() （它被称为，我通过 console.log 查看），但该组件未呈现，而问题组件仍然可见。

我看不到找到错误。这是整个代码。

为了完整起见，这里也是 Form 组件。

我正在尝试根据导航参数有条件地呈现 headerRight。我目前正在静态导航选项中尝试这个。这是我的代码，但没有渲染到屏幕上

可以这样做还是我需要在这里使用自定义标题？

任何帮助将不胜感激！谢谢！

解决方案：

去掉匿名函数，实现 soutot 推荐的条件语法

是否可以根据道具、参数或状态在 StackNavigator 中呈现不同的屏幕？

我在想像下面这样的事情，但目前我似乎无法弄清楚如何让 stackNavigator 拥有屏幕参数的范围。

有没有人对此有任何想法？谢谢！！

因此，我有一个登录页面，可将用户定向到配置文件页面，在该页面中发出异步请求，检索在 componentDidMount 事件中启动的用户 ID 号。一旦我得到结果，我就用检索到的数据在 id 上设置状态。

我正在努力做到这一点，以便某人不能只在 url 中键入“/profile”路径并被带到个人资料页面。为此，我尝试根据是否从正确的登录身份验证中检索到 id 进行条件渲染。这就是为什么如果您注意到

如果用户不提供电子邮件和密码，这会将用户重定向回登录页面。我已尝试确保我的配置文件组件在收到数据后安装和卸载，但我仍然不断收到错误消息：只能更新已安装或正在安装的组件。当组件“卸载”时我很困惑。

我正在尝试列出来自 API 的 5 个结果。目前，一个电话后有超过5个结果。我尝试使用索引，但因为它是条件渲染，它会跳过一些结果并且每次索引都会增加 - 这不是解决方案。每次打印结果时是否可以以某种方式分配值并增加它？