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中称为传播属性：

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

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

2 个答案: