React 在社交媒体上分享内容

Question

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

这里是react组件的代码

   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>

我如何包含一个共享按钮来共享 React 组件的内容、状态值或道具，而不仅仅是 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']}
        />
    </>
)

React 在社交媒体上分享内容

React share contents on social media

reactjs

react-share