Блог

Главная - Вопросы по программированию - Условный рендеринг внутри компонента

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

#reactjs #if-statement #modal-dialog #conditional #semantic-ui

#reactjs #if-оператор #модальный диалог #условные операторы #семантический пользовательский интерфейс

Вопрос:

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

Если я добавляю условие 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:

Что-то вроде этого? Хотя это не самый чистый подход

         <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',
               }
          }
        />

Комментарии:

1. да .. Это работает.. но я получаю ошибку в header теге. он не распознается как size или dimmer . Как преобразовать заголовок и содержимое в модальные атрибуты?

2. Я обновил комментарий, я думаю, Header его не следует заключать в запятые

3. ох… Извините за путаницу.. Я имею в виду, что сам атрибут header: and content: не распознан.

4. @Dhanapal извините, я не понимаю. Проверьте этот пример: codesandbox.io/s/wkyjk2426l?module=/example.js