条件付き渡しコンポーネントが配列内の小道具として反応する

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

アレイを渡す必要があります。spread操作はレスキュー用です。あなたは、デフォルトのボタン（この場合はokBtnBasicModal）との配列footerBtnsを設定することにより、そのロジックを分離することができ、それはpropsを通過していますならば、我々は次のボタンを追加

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

Answer 2

： あなたはそのような何かを行うことができます。

最後に、ModalコンポーネントのfooterBtns〜footerに割り当てます。だから、あなたは条件付きでモーダルコンポーネントの右にあるボタンをレンダリングしようとしているunshift()