Question

我想让用户将我的网站上的图片分享到Twitter。

我使用此模块react-share来实现此功能。但它没有提供共享图像的选项。

我的代码看起来很喜欢这个。

import { ShareButtons, ShareCounts, generateShareIcon, } from 'react-share';

const {
    FacebookShareButton,
    GooglePlusShareButton,
    LinkedinShareButton,
    TwitterShareButton,
    PinterestShareButton,
    VKShareButton,
} = ShareButtons;

<TwitterShareButton
    url={shareUrl}
    title={title}
    className="shareBtn col-md-1 col-sm-1 col-xs-1">
    <a className="twitter"><i className="fa fa-twitter" aria-hidden="true"></i></a>
</TwitterShareButton>

请帮我解决一下如何将图片分享到Twitter。

Answer 1

请在代码中添加<TwitterIcon>

<TwitterShareButton
        url={shareUrl}
        title={title}
        className="Demo__some-network__share-button">
        <TwitterIcon
          size={32}
          round />
      </TwitterShareButton>

Answer 2

react-share 不支持图像上传。您只能与 TwitterShareButton 共享URL，标题和主题标签。添加网址后，将显示页面的主图像。

您的图标也丢失了，这是添加图标的方法。

<TwitterShareButton url={url} title={title}>
    <button className="btn btn-circle">
        <i className="fab fa-twitter"> </i>
    </button>
</TwitterShareButton>

Answer 3

您无法使用此窗口小部件向Twitter分享丰富内容，只能将您的图片托管在静态网址上并通过TwitterShareButton分享该网址

https://samvikshana.weebly.com/blog/react-share-social-share-widgets

的示例反应共享代码段

Answer 4

正确的答案是，您需要将一个孩子（图标）传递到ShareButton并导入。

示例：

    import React, { Component } from "react";
    import {
      TwitterShareButton,
      TwitterIcon,
    } from "react-share";
    class Quotes extends Component {
    
     render() {
return( <div>
     <TwitterShareButton
              title="Hello"
             url="https://stackoverflow.com/"
            >
             
              <TwitterIcon size={32} round />
            </TwitterShareButton>    

</div>
       )
    }
 }

这是一个非常不错的工具。

如何使用react js实现与twitter的共享

4 个答案: