条件传递组件作为react中的数组prop

Question

How can I conditionally pass the footer's button component? cancelBtnBasicModal and okBtnBasicModal the button is still there without text label.

Below is a modal component, it worked, but if I don't pass in

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>
    );
  }

I tried

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

But won't work coz footer prop accept array.

Answer 1

You need to pass an Array, spread operation is for rescue. You can do something like that:

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

Answer 2

You can separate that logic by setting an array footerBtns with the default button ( okBtnBasicModal in this case) and then we add the next button if it's passed through props .

Finally assign footerBtns to footer in the Modal component.

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 on using unshift()