标签: conditional-rendering

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

<ReactSVGPanZoom
      //switch(this.props.Selected){
      // case '1': render <ComponentOne/>; break;
      // case '2': render <ComponentTwo/>; break;
      // case '3': render <ComponentThree/>; break;
      // case '4': render <ComponentFour/>; break;
      // default: render <ComponentOne/>
        }
</ReactSVGPanZoom>

我正在开发一个反应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 …

我写了一个代码:

<p:column headerText="Edit" width="40" rendered="#{(leaveDetails.strLeaveStatus == 'Canceled') or (leaveDetails.strLeaveStatus == 'Availed')}">
    <p:commandLink actionListener="#{userLeaveBean.editAppliedLeave}" title="Edit" disabled="true" process="@this" update="leaveDataTable" immediate="false">
        <h:graphicImage url="resources/images/edit.JPG"/>
            <f:attribute name="userId" value="#{employee.name}"/>
            <f:attribute name="editFirstHalf" value="#{leaveDetails.strStartTiming}"/>
            <f:attribute name="editSecondHalf" value="#{leaveDetails.strEndTiming}"/>
            <f:attribute name="editFrom" value="#{leaveDetails.dtLeaveFromDate}"/>
            <f:attribute name="editTo" value="#{leaveDetails.dtLeaveToDate}"/>
            <f:attribute name="leaveId" value="#{leaveDetails.strLeaveId}"/>
    </p:commandLink>
</p:column>

但渲染的属性不适用于该条件.如何使用逻辑运算符使条件有效？使用PrimeFaces 3.4.2

我正在尝试根据 Vue 中的用户输入有条件地呈现表单元素，但进展并不顺利。我知道如何使用 VanillaJS 或 jQuery 做到这一点，但我正在努力将这些知识转化为使用 Vue 的内置条件指令。我正在使用带有 vue-cli 的 webpack 模板的单文件组件。

从我的<template>：

<form autocomplete="off" name="loadDeets" id="loadDeets" class="loadDeets">
    <div class="form-group row">
       <label>Date</label>
       <flat-pickr v-model="date"
              :config="{dateFormat: 'l, F j'}"
                class="form-control" 
                placeholder="Select date"               
                name="date"></flat-pickr>
    </div>

    <div class="row">
        <div class="form-group col left">
           <label>Time</label>
           <flat-pickr v-model="time"
                :config="config"
                class="form-control" 
                placeholder="Select time"               
                name="time1"></flat-pickr>
        </div>

        <div class="form-group col right">
            <label>Time</label>
            <flat-pickr
                :config="config"
                class="form-control" 
                placeholder="Select time"               
                name="time2" v-show="document.getElementById('apptCheck').checked"></flat-pickr>
        </div>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="apptCheck">
        <label class="form-check-label" for="apptCheck">
           Appointment?
        </label>
    </div>
 </form>

这完全破坏了页面的组件呈现。因此，我尝试使用基于 Vue …

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

 export const InfoSection = (props: Props) => 
    {
        return (
            <div>
                <table>
                    <tr>
                        <th>#</th>
                        <th>User</th>
                        <th>Info</th>
                        <th>date</th>
                    </tr>
                    {
                        props.infoEntries.map( (l, i) => 
                        {
                            return (
                                <tr>
                                    <td>{i+1}</td>
                                    <td{l.UserId}</td>
                                    <td>{l.Info}</td>
                                    <td>{l.Date}</td>
                                </tr>
                            )
                        })
                    }
                    {
                        if(this.props.showEntryDetails){
                            return(
                        <tr>
                          <td>"Hello"</td>
                        </tr>
                    )
                        }
                    }
                </table>
            </div>
        )
    }

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

我有一个注销按钮，仅在用户登录后才显示。

我已经为此目的创建了一个函数，并将该函数包括在react的返回部分中，但是它不起作用。

这是功能：

const ifloggedin = () => {
    if (!localStorage.hasOwnProperty('token')) {
      return null
} else {
return <li><a href="#contact" className="Contact" onClick={logout} to={"/"}>Log Out</a></li>
}
  }

这就是我试图渲染它的方式：

        <div className="content">
          <li><a href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
          <li><a href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
          <li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
          <li><a href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
          {ifloggedin}
        </div>

有一个问题，我不知道如何在技术上正确地实现该组件。我想根据设备屏幕对元素进行条件渲染。示例：如果屏幕小于 700 px，则我得出一个结论，如果大于，则得出第二个结论

if(window.innerWidth > 700) {
   return(
    <Content>
       1 
    </Content>)
};
return (
<Content>
       2
</Content>)

我使用react、next js和typeScript技术

这个怎么做？

如何创建“编辑”按钮，以便在单击该按钮时将 更改h:outputText为h:inputText？

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

<div>
    {this.props.isOpen && this.state.isReady && <div> Hello! </div>}
</div>

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

我的目标是制作一个组件，用嵌套的 ul 标签渲染卡片，如下所示： 从这样的数据中，它是通过父组件的 props 传递下来的：

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

let inUl = false;
<div className="cardBody">
        {props.body.map((el, index) => {
          if(el.endsWith(":")){
            inUl = true;
            return <li>{el}<ul>
          } else if(inUl && el.endsWith('.')){
            inUl = false;
            return <li>{el}</li></ul>
          } else {
            return <li>{el}</li>
          }
        })}
  </div>

任何帮助将不胜感激，我的截止日期很近，现在我实际上陷入了项目的最后一部分 - 这。