标签: conditional-rendering

首先,我是Java EE的新手,来自强大的ASP .NET开发背景.我已经浏览了网络,我可能会错过这个,但似乎没有关于如何将支持bean类连接到JSF组件的简单直接的教程.

一个很好的例子是这样的,目前我正在尝试创建一个JSF页面,其中有一组链接作为菜单栏和一组表单.我打算做的是,当点击一个链接时,将呈现一个特定的表单.

在ASP.NET中,我可以轻松检索元素,然后将属性设置为可显示.我想知道在JSF中是否有简单的方法(哎呀,甚至任何方式).

表单已经在页面中,只需在单击特定链接时将"render"属性设置为true即可.

我正在尝试ajax更新有条件渲染的组件.

<h:form>
    ...
    <h:commandButton value="Login" action="#{login.submit}">
        <f:ajax execute="@form" render=":text" />
    </h:commandButton>
</h:form>
<h:outputText id="text" value="You're logged in!" rendered="#{not empty user}" />

但是,这不起作用.我可以保证这#{user}实际上是可用的.这是怎么造成的,我该如何解决？

所以我找到了一些接近这个的答案,我发现足以解决我遇到的问题.但即使这样,我也很好奇了解这方面的运作方式.让我用一个例子来说明:

我有一个.xhtml看起来像这样(缩短)的facelet 页面.

<h:form id="resultForm">

    <h:panelGroup class="search_form" layout="block">
        <h:inputText id="lastname" value="#{search.lastname}"/>
        <h:commandButton action="#{search.find}" value="Find">
            <f:ajax execute="lastname" render="resultDisplay"/>
        </h:commandButton>
    </h:panelGroup>

    <h:dataTable value="#{search.searchResults}" var="results" id="resultDisplay"
            rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>

</h:form>

现在,为了突破性,我不会发布所有的支持bean代码,但我有这样的东西:

public void find() {
    searchResults = setResults(true);
}

哪里searchResults是ArrayList<Objects>.在搜索之后,它不是null - 在多个测试中检查(可以为null,但不在我正在进行的测试中).

现在.这不起作用.

但是,如果我将dataTable内部嵌套在另一个内部panelGroup,那么它会起作用.

<h:panelGroup id="resultDisplay">
    <h:dataTable value="#{search.searchResults}" var="results"
        rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>
</h:panelGroup>

现在,这种变化可以让一切正常.我对此感到满意......但我想我也在寻求一些理解.有关为什么我必须嵌套这些组件的任何见解？我肯定错过了一些东西!

我正在尝试实现一个复合组件,该组件以纯文本显示用户的信息详细信息,或者如果所需的详细信息是当前连接的用户的详细信息,则通过可编辑的输入文本字段显示它们.

我知道al UI Components可以通过渲染属性渲染,但是那些不是UI组件的东西(例如div)

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

我知道div没有渲染属性,可能我根本没有采用正确的方法.我可以很容易地使用JSTL标签,但我想避免这种情况.

我试图在状态结束时<c:if>有条件地放入一个<h:outputLink>内部<h:dataTable>.

<h:dataTable value="#{bean.items}" var="item" width="80%">
    <h:column>
        <f:facet name="header">
            <h:outputText value="State" />
        </f:facet>

        <c:if test="#{item.state != 'Finish'}">
            <h:outputText value="Missing value" />
        </c:if>
        <c:if test="#{item.state == 'Finish'}">
            <h:outputLink value="myLink">
                <h:outputText value="Value = #{item.state}" />
            </h:outputLink>
        </c:if>
    </h:column>
</h:dataTable>

但这不起作用,为什么会这样,我该如何解决？

我如何有条件地渲染<ui:define>？

模板中的数据取决于所需的数据<f:viewParam>.

但是如果提供了无效的视图参数,那么<ui:define>不应该渲染,因为应该使用模板的默认内容.

我尝试过使用<c:if>但不起作用.

我试图有条件地渲染一个<tr>因此我不能使用<h:panelGroup>,因为它将渲染<span> or <div>

我目前的(工作)方法如下:

<h:outputFormat rendered="#{negotiator.maySend}">
    <tr> my tr stuff </tr>
</h:outputFormat>

这是有效的,但我不确定这是否是滥用的方式<h:outputFormat>- 在我使用之前,<h:outputLabel>但这是<label>在IE 中呈现的.

我也已经阅读了这个问题的答案,但如上所述,它们不会对我有用,因为<tr>:如何不在JSF中渲染整个块？

示例是一个功能组件，我在其中有条件地渲染div。我希望它div在有条件渲染时淡入，反之亦然淡出。

为此，我维护了两个本地状态变量：render和fadeIn，它们是根据show传递给示例组件的 prop 计算的。

我所做的是：

• 当showprop it true时，我设置render为true，因此div有条件地渲染，并且在超时后10ms我设置fadeIn 为true，这会将我的 div 的 CSS 类名设置为show。
• 当showprop it false时，我设置fadeIn为false，这会将我的 div 的 CSS 类名设置为hide超时200ms（CSS 中的过渡时间）后，我将其设置render 为false，以便div有条件地隐藏。

代码：

interface Props {
  show: boolean;
}

const Example: React.FC<Props> …

在条件渲染或隐藏组件之间进行选择的事实上的方法是{ 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？

我正在开发一个反应Web应用程序，我遇到的问题是我正在使用不同的道具对同一组件进行条件渲染，但不会卸载它然后再次重新安装它，这意味着该组件的安装周期永远不会再次运行，组件将不再被初始化

menu === 1 ?
   <SidebarChat dataList={chats} title="Chats" />
: menu === 2 ?
   <SidebarChat dataList={rooms} title="Rooms" />
: menu === 3 ?
   <SidebarChat dataList={users} title="Chats" />
: null

这是代码，我希望 SidebarChat 在菜单更改时卸载而不是安装。

这是 SidebarChat 代码

import React, { useEffect, useState } from 'react';
import { Avatar, IconButton } from '@material-ui/core';
import { Add } from '@material-ui/icons';
import './SidebarChat.css';
import db from './firebase';
import { Link } from 'react-router-dom';



function SidebarChat({ dataList, title }) {
    const [messages, setMessages] = useState([]);

    const …