reactjs - 使用 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

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

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