首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将react-share与react-image-lightbox一起使用

将react-share与react-image-lightbox一起使用
EN

Stack Overflow用户
提问于 2018-05-30 05:34:21
回答 1查看 628关注 0票数 1

我接管了一个React项目,正在笨拙地将react-sharereact-image-lightbox结合起来。我对ReactTypescript都不太熟悉,所以任何见解都非常感谢。

下面是相关的代码片段:

代码语言:javascript
复制
import {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  EmailShareButton,
} from 'react-share'

const Lightbox = require('react-image-lightbox')

render() {

    return(
       <Lightbox
         ...
         toolbarButtons={['Facebook share button?', 'Twitter share button?']}
         ...
         onCloseRequest={this.handleCloseViewer}
         onMovePrevRequest={this.handleViewPrev}
         onMoveNextRequest={this.handleViewNext}
       />
     )
 }
EN

回答 1

Stack Overflow用户

发布于 2018-05-31 07:10:47

解决了:这是工作片段。

代码语言:javascript
复制
import {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  EmailShareButton,
} from 'react-share'

import {
  FacebookIcon,
  TwitterIcon,
  PinterestIcon,
  EmailIcon
} from 'react-share';

const Lightbox = require('react-image-lightbox')

render() {

    return(
       <Lightbox
         ...
         toolbarButtons={[
              <FacebookShareButton url={window.location.href} children={<FacebookIcon size={32} round={true} />} />,
              <TwitterShareButton url={window.location.href} children={<TwitterIcon size={32} round={true} />} />,
              <PinterestShareButton url={window.location.href} children={<PinterestIcon size={32} round={true} />} />,
              <EmailShareButton url={window.location.href} children={<EmailIcon size={32} round={true} />} />
           ]}
         ...
         onCloseRequest={this.handleCloseViewer}
         onMovePrevRequest={this.handleViewPrev}
         onMoveNextRequest={this.handleViewNext}
       />
     )
 }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50593304

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档