一、效果

容器中的按钮居中，当菜单栏收起时也是居中状态

二、封装PageBottomButtonBox组件

index.tsx

// 容器：存放页面底部按钮
import React from 'react'
import { GlobalModelState, connect } from 'umi'
import { ConnectState } from '@/models/connect'
import './index.less'

interface props {
  global: GlobalModelState
  render: Function
}

const PageBottomButtonBox: React.FC<props> = (props) => {
  const {
    global: { collapsed },
    render
  } = props
  const asideWidth = collapsed ? 90 : 256
  return (
    <div
      className="page-bottom-button-box"
      style={{ left: `${asideWidth}px`, width: `calc(100% - ${asideWidth}px)` }}
    >
      {render()}
    </div>
  )
}

export default connect(({ global }: ConnectState) => ({ global }))(PageBottomButtonBox)

index.less

.page-bottom-button-box {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background-color: var(--theme-pro-table-bk);
  box-shadow: 2px 5px 20px 0 rgba(57, 78, 145, 0.3);
  transition: width 0.2s, left 0.2s;
}

三、使用

引入：

import PageBottomButtonBox from '@/components/PageBottomButtonBox'

  const footerDom = () => (
    <>
      <Button onClick={history.goBack.bind(this)}>返回</Button>
      <Button type="primary" onClick={() => createWeekRef.current.showModal()}>
        生成周{+weekType === 1 ? '任务' : '计划'}
      </Button>
      <ConfirmModel
        childRef={createWeekRef}
        text="你本次生成后，会重复生成周任务/周计划，请谨慎操作！确定生成吗？"
        handleOk={async () => {
          const params = { monthWorkId, ...weekInfoCopy }
          const { success } = await creatWeekApi(params)
          if (success) {
            createWeekRef.current.handleCancel()
            message.success(`生成周${+weekType === 1 ? '任务' : '计划'}成功`)
          }
        }}
      />
    </>
  )
  
  // DOM
          <PageBottomButtonBox render={footerDom} />

四、props.children

组件标签中的元素通过props.children也可以展示出来，但是使用render props的方式优势在于传参更方便