首页 > 解决方案 > 如何在reactjs中将react-chartjs-2的条形图作为图像分享到社交媒体上?

问题描述

我正在开发一个反应应用程序并使用 react-chartjs-2 创建条形图。我想将该条形图作为图像分享到社交媒体上。我尝试了 react-share 包,但其中使用的共享按钮只允许传递 url。我找不到办法做到这一点。

这是我的条形图代码。

我已将数据选项作为道具传递给类组件

import React from 'react';
import {HorizontalBar} from 'react-chartjs-2';

class BarAreaComponent extends React.PureComponent {

  componentRef = React.createRef();

  render() {
    return (
        <div>
            <HorizontalBar ref={this.componentRef} id="BarArea" height={600} data={this.props.data} options={this.props.options}/>
        </div>
    );
  }
}
export default BarAreaComponent;

这是我尝试使用 react-share 实现的共享功能的代码

import { FacebookShareButton, FacebookIcon } from "react-share"
    const currentURL = window.location.href // returns the absolute URL of a page
    <FacebookShareButton url={currentURL} >
            <FacebookIcon size={40} round />
    </FacebookShareButton>

如何包含共享 react-chartjs-2 条形图的共享按钮?

标签: reactjsreact-chartjs-2react-share

解决方案


推荐阅读