使用React-semantic UI进行条件渲染

Question

我正在尝试渲染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}]}
     />
 )

}

任何线索？我在这里缺少什么？

Answer 1

内容属性丢失。

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

Answer 2

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

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