【React工作记录六十一】react children初步理解

<BaseImgPreview>
              {(modal) => (
                <img
                  style={{ width: '100%', height: '70px' }}
                  src={record.activityImg}
                  onClick={() => modal.show(record.activityImg)}
                />
              )}
            </BaseImgPreview>

import React, { Component, Fragment } from 'react';
import { Modal } from 'antd';
export default class BaseImgPreview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      previewImage: '',
    };
  }
  show = (previewImage) => {
    this.setState({ visible: true, previewImage });
  };
  hide = () => {
    this.setState({ visible: false });
  };
  // Modal Ok事件
  handleOk = () => {
    this.setState({ visible: false });
  };
  render() {
    const { visible, previewImage } = this.state;
    const { children, modalProps = {}, title } = this.props;
    return (
      <Fragment>
        {children({
          visible: visible,
          show: this.show,
          hide: this.hide,
        })}
        <Modal
          title={title ? title : '查看图片'}
          maskClosable={false}
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.hide}
          width={1000}
          footer={null}
          {...modalProps}
        >
          <div
            style={{
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <img
              alt="example"
              style={{ maxHeight: '700px', objectFit: 'cover', maxWidth: '90%' }}
              src={previewImage}
            />
          </div>
        </Modal>
      </Fragment>
    );
  }
}