函数组件，默认值，props默认值

如果没有传递，那么就是 取消 确定按钮，如果传递了，就是传递的值。

<FilterFooter className={
    
    styles.footer } cancelText={
    
    '清除'} />

import React from 'react'

import {
    
     Flex } from 'antd-mobile'
import PropTypes from 'prop-types'

import styles from './index.module.css'

function FilterFooter({
    
    
  cancelText = '取消',
  okText = '确定',
  onCancel,
  onOk,
  className
}) {
    
    
  return (
    <Flex className={
    
    [styles.root, className || ''].join(' ')}>
      {
    
    /* 取消按钮 */}
      <span
        className={
    
    [styles.btn, styles.cancel].join(' ')}
        onClick={
    
    onCancel}
      >
        {
    
    cancelText}
      </span>

      {
    
    /* 确定按钮 */}
      <span className={
    
    [styles.btn, styles.ok].join(' ')} onClick={
    
    onOk}>
        {
    
    okText}
      </span>
    </Flex>
  )
}

// props校验
FilterFooter.propTypes = {
    
    
  cancelText: PropTypes.string,
  okText: PropTypes.string,
  onCancel: PropTypes.func,
  onOk: PropTypes.func,
  className: PropTypes.string
}

export default FilterFooter