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>
            ]}

但是不会工作coz footer prop accept array。

Answer 1

您需要传递数组，spread操作用于救援。你可以这样做：

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

Answer 2

您可以通过使用默认按钮（在本例中为footerBtns）设置数组okBtnBasicModal来分隔该逻辑，然后如果它通过props，我们会添加下一个按钮。

最后将footerBtns分配给footer组件中的Modal。

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()

条件传递组件作为反应中的数组prop

2 个答案: