组件内的条件渲染

Question

我在单独的组件中有一个语义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>"}
/>

上面的方法有什么问题？

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