卷曲表达式中的 JSX 卷曲表达式答案

【问题标题】：JSX Curly Expression inside a Curly Expression卷曲表达式中的 JSX 卷曲表达式
【发布时间】：2021-07-26 18:44:37
【问题描述】：

我在主表达式中有以下子表达式，它被标记为错误。如果我删除内部的花括号也是一个错误。

{!isNonParticipatingUser(props) 
&&
    <LinkContainer to="/contactUs">
        <Dropdown.Item href="#">Contact Us</Dropdown.Item>
    </LinkContainer>
    {props.appData && props.appData.appProperties
    &&
        <Dropdown.Item target="_blank" href={getAppPropertiesValue(props, 'link.employee.faq')}>FAQs
        </Dropdown.Item>
    }
}

【问题讨论】：

嗯，我注意到的第一件事是你没有从你的第一个 && 返回一个元素。你需要一个片段或包装div。
也标记为错误真的没有帮助。我确定你得到了比这更多的细节？
我认为@BrianThompson 是正确的......如果你将你的东西收集到一个单一的父片段/元素中，你可以做你想做的事。

标签： reactjs

【解决方案1】：

试试这个

return(
     <>
         {!isNonParticipatingUser(props) 
         &&
         <>
             <LinkContainer to="/contactUs">
               <Dropdown.Item href="#">Contact Us</Dropdown.Item>
             </LinkContainer>
         {props.appData && props.appData.appProperties
             &&   
                 <Dropdown.Item target="_blank" href= getAppPropertiesValue(props, 'link.employee.faq')}>FAQs
                 </Dropdown.Item>
         }
         </>
         }
     </>
    );

【讨论】：