react children初步理解

简介: 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, })}


相关文章
|
6月前
|
前端开发
react-router中的render、children、component
react-router中的render、children、component
187 1
|
5月前
|
前端开发 索引
解决React报错Encountered two children with the same key
解决React报错Encountered two children with the same key
|
前端开发
前端项目实战陆拾壹react-admin+material ui-踩坑-List需要Datagrid中children写法
前端项目实战陆拾壹react-admin+material ui-踩坑-List需要Datagrid中children写法
55 0
|
6月前
|
前端开发 开发者
React 组件的 children 数据使用
React 组件的 children 数据使用
94 0
|
6月前
|
前端开发 JavaScript
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
77 0
|
前端开发
前端项目实战玖拾壹react-admin+material ui-踩坑-List的用法之children用法之SimpleList
前端项目实战玖拾壹react-admin+material ui-踩坑-List的用法之children用法之SimpleList
60 0
|
前端开发
前端项目实战玖拾react-admin+material ui-踩坑-List的用法之children用法之WithListContext
前端项目实战玖拾react-admin+material ui-踩坑-List的用法之children用法之WithListContext
53 0
|
前端开发
前端项目实战陆拾贰react-admin+material ui-踩坑-List需要Datagrid中children写法
前端项目实战陆拾贰react-admin+material ui-踩坑-List需要Datagrid中children写法
53 0
|
前端开发 开发者
React 组件的 children 数据使用
React 组件的 children 数据使用
94 0
|
前端开发
【React工作记录六十一】react children初步理解
【React工作记录六十一】react children初步理解
63 0