條件傳遞組件作爲數組prop中的反應

Question

如何有條件地傳遞頁腳的按鈕組件？ cancelBtnBasicModal和okBtnBasicModal該按鈕仍然沒有文字標籤。

下面是一個模式的組成部分，它的工作，但如果我不

render() { 

    const { titleBasicModal, showBasicModal, handleOkBasicModal, handleCancelBasicModal, 
     contentBasicModal, cancelBtnBasicModal, okBtnBasicModal, loading } = this.props 

    return (
     <div> 
     <Modal 
      visible={showBasicModal} 
      title={titleBasicModal} 
      onCancel={handleCancelBasicModal} 
      footer={[ 
       <Button onClick={handleCancelBasicModal}> 
       {cancelBtnBasicModal} 
       </Button>, 
       <Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}> 
       {okBtnBasicModal} 
       </Button> 
      ]} 
     > 
      {contentBasicModal} 
     </Modal> 
     </div> 
    ); 
    } 

通過我嘗試

footer={[ 
       {cancelBtnBasicModal && <Button onClick={handleCancelBasicModal}> 
       {cancelBtnBasicModal} 
       </Button>}, 
       <Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}> 
       {okBtnBasicModal} 
       </Button> 
      ]} 

但是行不通堂妹頁腳道具接受陣列。

Answer 1

您需要傳遞一個Array，spread操作用於救援。 你可以做這樣的事情：

footer={[ 
    ...(cancelBtnBasicModal ? [ 
     <Button onClick={handleCancelBasicModal}> 
      {cancelBtnBasicModal} 
     </Button>]: []), 
     <Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}> 
      {okBtnBasicModal} 
     </Button> 
]} 

Answer 2

您可以通過設置與默認按鈕（在這種情況下okBtnBasicModal）數組footerBtns這個邏輯分離，那麼我們如果它通過props通過添加下一個按鈕。

最後在Modal組件中將footerBtns指定爲footer。

render() { 

    const { titleBasicModal, showBasicModal, handleOkBasicModal, 
    handleCancelBasicModal, contentBasicModal, cancelBtnBasicModal, 
    okBtnBasicModal, loading } = this.props 

    let footerBtns = [ 
    <Button key="submit" type="primary" size="large" loading={loading} 
     onClick={handleOkBasicModal}> 
     {okBtnBasicModal} 
    </Button> 
    ] 
    /* using unshift to add the button to the beginning of the Array */ 
    cancelBasicModal && footerBtns.unshift(
    <Button onClick= 
     {handleCancelBasicModal}>{cancelBtnBasicModal} 
    </Button> 
); 
return (
    <div> 
     <Modal 
     visible={showBasicModal} 
     title={titleBasicModal} 
     onCancel={handleCancelBasicModal} 
     footer={footerBtns}> 
      {contentBasicModal} 
     </Modal> 
    </div> 
); 
} 

More info使用unshift()