Условный рендеринг внутри компонента - PullRequest
Новая
       27

Условный рендеринг внутри компонента

0 голосов
/ 24 марта 2019

У меня есть Semantic UI Modal в отдельном компоненте, и я звоню в другой компонент. Это работает нормально.

Если я добавлю условие if внутри модала, оно выдаст ошибку.

Ниже мой код.

Modal.js 

import React from 'react'
import { Button, Icon, Modal as SemanticModal} from 'semantic-ui-react'

const Modal = ({trigger, header, size, dimmer, content, actions}) => (
    <SemanticModal
        trigger={trigger}
        size={size}
        dimmer={dimmer}
        header={header}
        content={content}
        actions={actions}
      />
    )

export default Modal;

App.js 

<Modal
    trigger={<a>Link</a>}
    size={'small'}
    dimmer={'blurring'}
    header={result===""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content={result===""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

Вышеуказанный работает нормально.

Но приведенный ниже не работает

App.js 

<Modal
    trigger={<a>Link</a>}
    size={'small'}
    dimmer={'blurring'}

    {
       publishStatus=="" ? (
            header="<Header icon='spinner loading'/>"
            content="Loading..."
       ) : (
            header="<Header content='Result' />"
            content="showing the result"
       )
    }


    header={result===""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content={result===""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

Что не так в вышеуказанном методе?

1 Ответ

0 голосов
/ 24 марта 2019

Как то так? Не самый чистый подход, хотя 

        <Modal
          trigger={<a>Link</a>}
          size="small"
          dimmer="blurring"
          {
           ...publishStatus === '' ? {
                header: <Header icon='spinner loading'/>,
                content: 'Loading...',
           } : {
                header: <Header content='Result' />,
                content: 'showing the result',
               }
          }
        />
...