0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点# 【React工作记录六十一】react children初步理解


 前言


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


导语

react children初步理解

#yyds干货盘点# 【React工作记录六十一】react children初步理解_ide#yyds干货盘点# 【React工作记录六十一】react children初步理解_ide_02编辑

核心父组件

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

#yyds干货盘点# 【React工作记录六十一】react children初步理解_点击事件_03

 核心子组件

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

#yyds干货盘点# 【React工作记录六十一】react children初步理解_ide_04

核心归纳


1首先父组件得代码

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

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

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

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

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


运行结果

#yyds干货盘点# 【React工作记录六十一】react children初步理解_点击事件_05#yyds干货盘点# 【React工作记录六十一】react children初步理解_点击事件_06



举报

相关推荐

0 条评论