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

 

目录

前言

导语

核心父组件

 核心子组件

核心归纳

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

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

核心归纳

1首先父组件得代码

 style={{ width: '100%', height: '70px' }}

                  src={record.activityImg}作为回显值得一个使用

2点击事件表示组件得一个传参

onClick={() => modal.show(record.activityImg)也就是对应得子组件里面的一个传参

3子组件做的是自己本身的一个回显操作 大概就是这样

运行结果

编辑