反应在社交媒体上分享内容

Question

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

这是反应组件的代码

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

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

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

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

Answer 1

我自己找到了一种方法。抱歉，我应该更好地阅读 react-share 包的文档。 您可以传递到共享按钮的可选道具。所以我这样做了。

<FacebookShareButton
url="someurl"
quote={props.joke.setup + props.joke.punchline}
hashtag="#programing joke">
<FacebookIcon logoFillColor="white" />
</FacebookShareButton>

Answer 2

你也可以使用Share Social，只需使用以下代码

const style = {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
};
console.log(currentPlaylist._id);
return (
<>
<ShareSocial 
style={style}
url ={currentPlaylist._id}
socialTypes={['facebook','twitter','reddit','linkedin','email','pinterest']}
/>
</>
)