reactjs - 使用 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}
       />
     )
 }