使用react-share与react-image-lightbox

Question

我接手了一个React项目，并且正在考虑将react-share与react-image-lightbox合并。我对React和Typescript都非常不熟悉，所以我们非常感谢任何见解。

以下是相关摘录：

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

Answer 1

已解决：这是工作片段。

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