标签: react-share

在我所有的分享按钮中，我的图片不只显示网址

在我的公共文件夹 html 标题中

    <meta content="`%PUBLIC_URL%/${picture.jpg}`">
    <meta property="og:description" content='' />

在我的详细信息组件中，我使用 react-helmet t 动态地将标题放在共享按钮的位置。

  render() { 
    const { project, auth } = this.props;
    const shareUrl = window.location.href; 
    const articleId = this.props.match.params.id; 
    const {pathname} = this.props.location;
    const imageURL = '';

    if (project) {

      return (
        <div className="container">

头盔组件

          <Helmet>
              <meta charSet="utf-8" />
              <title>{project.title}</title>
              <meta property="og:url" content={`https://l.facebook.com/l.php?u=https%3A%2F%2F${shareUrl?shareUrl:''}`} />
              <meta property="og:description" content={project.title} />
              <meta property="og:image" content={imageURL!==''?`${project.pictureUrl}`: ''} />
              <meta property="fb:app_id" content="198985484382564" />
          </Helmet>

当分享到脸书时，我得到了什么

苏丹抗议者与警方发生冲突，8 人死亡https://firebasestorage.googleapis.com/v0/b/dsdnewsapi.appspot.com/o/projectPics%2F824b9ec1-e708-455e-acce-9bbd40d2b24a.JPG?alt=media&token=1837f -5cc3-4596-8373-d74f6699799a

只是图片网址，但图片没有显示。

            <FacebookShareButton
              url={shareUrl}
              imageURL={project.pictureUrl}
              quote={project.title} …

我有一个 React 应用程序，它使用Plotly.js在前端动态生成图像。我想添加图像共享功能。我正在尝试为此使用react-share 。社交平台需要图像 URL 才能进行图像共享，并且不支持 base64 编码等图像。后端的实现可以接收 Base64 格式的图像，存储在数据库中并返回图像的 URL，然后用于与react-share.

由于图像是动态生成的（例如，每次用户调整图表大小时图像都会发生变化），因此当用户单击共享图标时，一切都应该完成。

因此，当用户点击共享图标后，前端生成的图像应该保存到后端

let imgURI;

  const handleClick = () => {
    Plotly.toImage('chartContainer', {
      format: 'png',
      width: 1000,
      height: 600
    })
      .then(dataUrl => api.post('/image/base64ToPng', { image: dataUrl })
        .then(
          (response) => {
            imgURI = response.data.imgURI;
          },
          failure => console.error(failure)
        ));
  };

收到响应后，像这样传递给共享组件

<FacebookShareButton
            url={imgURI}
          >
     <FacebookIcon/>
</FacebookShareButton>

代码示例不是异步的，因此图像 URI 不会传递到共享组件，因此共享不起作用。我尝试根据是否定义来使用条件传递该道具，但没有提出解决方案。我还在react-share repo中查找了一些 处理异步url的问题，但似乎它们都没有处理点击时的动态图像共享。

我非常感谢有关如何完成此任务的提示。

当我尝试在我的应用程序中包含react-share时，我遇到了下一个错误，所有编译都很好，如果我转到另一条路线，没有加载该库工作正常，但当我包含它时崩溃。

TypeError: util.inherits is not a function

我正在使用带有 webpack 2 的 webpack 开发服务器。我嘲笑了下一个模块

注意：我尝试模拟 utils，因为 util 未在非节点环境中定义。

node: {
    fs: "empty",
    child_process: "empty",
  },

我正在尝试在reactjs应用程序中的社交媒体（主要是FB、twitter、linkedIn）上共享图像和视频，已添加react-helmet，但仍然无法共享图像，下面是我引用的链接和我的代码。

https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445

上述解决方案不起作用

import React from "react";
import { Helmet } from "react-helmet";
// import { useLocation } from "react-router-dom";
export default function HelmetMetaData(props) {


  // let location = useLocation();
  let quote = props.quote !== undefined ? props.quote : "";

  let title =
    props.title !== undefined
      ? props.title
      : "CampersTribe - World is yours to explore";
  let image =
    props.image !== undefined
      ? props.image
      : "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80";
  let description =
    props.description !== undefined
      ? props.description
      : "CampersTribe lets you experience the …

使用 NPM 包 React-Share 时，我收到一条错误，显示以下错误。拒绝从“https://static-exp1.licdn.com/sc/h/8ekldmhv4d8prk5sml735t6np”加载清单，因为它违反了以下内容安全策略指令：“manifest-src 'self'”。

我还尝试将 URL 硬编码到共享链接 https://www.linkedin.com/shareArticle/?url=https%3A%2F%2Fq.sparksandhoney.com%2Freport%2F622bc4fc659871873884fdaa&mini=true

顺便说一句，昨天我问了这个问题，但没有得到想要的结果。

我正在尝试通过 LinkedIn 设置共享消息。我知道要工作你的参数必须被编码。例如我制作了链接：

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fathenatools.com%2Fafk&title=ATHENA%20Tools%20by%20Invitation%20Only&summary=Create%20Worlds%20in%20your%20dev%20tool% 2010X%20faster%2C%2010X%20cheaper%20and%20in%20more%20detail！%20https%3A%2F%2Fathenatools.com%2Fafk%20BY%20INVITATION%20ONLY%20-%20你%20%20-%20你%20%202002 20code%20RFCODE2F%20to%20join.%20%23ATHENAtools&source=AthenaTools

API中的参数：

但它可以工作并且只正确显示一个参数，链接：

所以我没有放弃并尝试通过库React-share，但它也不起作用。例如，我根据文档设置参数：

但我明白了：

所以，我需要添加标题、描述和一些代码，每次用户注册和所需的图像时都会改变这些代码。

亲爱的堆栈溢出社区。我正在使用 create react app 构建一个 React 应用程序，我将在其中显示从外部 API 获取的随机笑话。

这是反应组件的代码

   import React from "react"
   function Home(props) {
        return (
            <div>
                <h2>{props.joke.setup}</h2>
                    <h3>{props.joke.punchline}</h3>
            </div>
        )
    }

我想包括一个分享功能来在社交媒体上分享当前的笑话。我尝试了 react-share 包，但其中使用的共享按钮只允许传递 url。在我的情况下，这将是我的应用程序的基本 url，并且不能包含我正在显示的当前笑话。

    import { FacebookShareButton, FacebookIcon } from "react-share"
    <FacebookShareButton url="#">
        <FacebookIcon logoFillColor="white" />
    </FacebookShareButton>

我怎么能包含一个共享按钮来共享反应组件的内容、状态或道具的值而不仅仅是 url？例如，像上面这样的分享按钮，但有额外的道具，我可以传递内容，props.joke.setup，props.joke.punchline 非常感谢

我尝试使用React-share包将文章当前 URL 分享到 Facebook、Twitter 和 LinkedIn 等社交媒体。我在分享页面时遇到一些问题： （网址： https: //www.linkedin.com/shareArticle/? url=https%3A%2F%2Fstaging.bidboxy.co%2Fcar-details%2Fhonda-brio-at-limited-edition&mini=true ）

代码：

import React from 'react';
import { LinkedinShareButton } from "react-share";
let shareUrl = window.location.href;

export default class Share extends React.Component {
   render() {
      return(
      <LinkedinShareButton url={`${shareUrl}`}>
         <div className="icon-socmed-white linkedin">
            <FaLinkedinIn/>
         </div>
      </LinkedinShareButton>)
   }
}

这种情况很奇怪，如果我尝试将主页页面作为共享文章共享，它会正常工作。