使用 React 语义 UI 进行条件渲染

Posted 2023-02-22

【中文标题】使用 React 语义 UI 进行条件渲染

【英文标题】：Conditional Rendering with React-semantic UI

【发布时间】：2019-09-03 09:42:05

【问题描述】：

我正在尝试呈现 React-Semantic UI 消息并根据条件我需要根据条件显示内容或列表。

工作代码：

const Message = (icon, header, content, className, list) => 
if(Array.isArray(content))

    return (
    <SemanticMessage
        icon=icon
        header=header
        className=className
        list=content
    />
    )
 else 
    return (
    <SemanticMessage
        icon=icon
        header=header
        className=className
        content=content
    />
    )

但这不起作用：

const Message = (icon, header, content, className, list) => 
 return (
     <Message
         icon=icon
         header=header
         className=className
         ...Array.isArray(content) ? [list=content] : [content=content]
     />
 )

有什么线索吗？我在这里缺少什么？

【参考方案1】：

缺少内容属性。

return (
     <Message
        // this content prop missing in your code
         content=...Array.isArray(content) ? [list=content] : [content=content]
     />
 )

【讨论】：

不..这是必需的

【参考方案2】：

您需要稍微修改传播以传播具有键/值对的对象，而不是传播数组。这些在 JSX 中称为 传播属性：

const Message = (icon, header, content, className, list) => 
 return (
     <Message
         icon=icon
         header=header
         className=className
         ...Array.isArray(content) ?  list: content  :  content  
     />
 )