如何使用 React js 实现分享到 Twitter

Posted 2023-02-23

【中文标题】如何使用 React js 实现分享到 Twitter

【英文标题】：How to implement share to twitter with react js

【发布时间】：2017-12-21 23:59:36

【问题描述】：

我想让用户将图片从我的网站分享到 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 的问题。

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

请在您的代码中添加<TwitterIcon>

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

【讨论】：

如何获取当前url

【参考方案2】：

您不能使用此小部件将丰富的内容分享到 twitter，唯一的方法是将您的图片托管在静态 url 上并通过TwitterShareButton分享该 url

https://samvikshana.weebly.com/blog/react-share-social-share-widgets 的示例 react-share 代码 sn-p

【参考方案3】：

react-share 不支持图片上传。您只能与 TwitterShareButton 共享网址、标题和主题标签。 添加url时会显示页面的主图。

你的图标也不见了，这就是你可以添加图标的方法。

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

【参考方案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://***.com/"
            >
             
              <TwitterIcon size=32 round />
            </TwitterShareButton>    

</div>
       )
    
 

这是一个非常好的工具。

【讨论】：

您能否为您的代码提供更多上下文，例如导入。还可以尝试使用 TwitterShareButton 示例来匹配问题。