Условный рендеринг с React-семантическим интерфейсом - PullRequest
Новая
       34

Условный рендеринг с React-семантическим интерфейсом

0 голосов
/ 12 апреля 2019

Я пытаюсь отобразить сообщение 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}]}
     />
 )

}

какие-либо ведет? чего мне здесь не хватает?

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Вам нужно немного изменить спред, чтобы распространить объект с парами ключ / значение в отличие от расширения массива. Они известны как атрибуты распространения в JSX: 

const Message = ({icon, header, content, className, list}) => {
 return (
     <Message
         icon={icon}
         header={header}
         className={className}
         {...Array.isArray(content) ? { list: content } : { content } }
     />
 )
}
0 голосов
/ 12 апреля 2019

Свойство Content отсутствует. 

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