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 ( {children({ visible: visible, show: this.show, hide: this.hide, })}

); } } ```