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

【问题标题】：Conditional Rendering with React-semantic UI使用 React 语义 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}]}
     />
 )

}

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

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react conditional-rendering

【解决方案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 } }
     />
 )
}

【讨论】：