当前位置：首页 > React

react如何调用百度分享

2026-01-26 02:35:58React

调用百度分享的方法

在React项目中集成百度分享功能，可以通过以下步骤实现：

安装百度分享的JavaScript库 百度分享提供了官方的JavaScript库，可以直接引入到项目中。在public/index.html文件的<head>标签内添加以下代码：

<script>
  window._bd_share_config = {
    common: {
      bdText: '自定义分享内容',
      bdDesc: '自定义分享描述',
      bdUrl: window.location.href,
      bdPic: '自定义分享图片URL'
    },
    share: [{
      "bdSize": 16
    }]
  };
</script>
<script src="https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=0.7"></script>

动态加载百度分享按钮 如果需要在特定组件中动态加载百度分享按钮，可以在组件的useEffect钩子中动态插入脚本：

import React, { useEffect } from 'react';

const ShareComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=0.7';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="bdsharebuttonbox">
      <a href="#" className="bds_more" data-cmd="more"></a>
      <a href="#" className="bds_qzone" data-cmd="qzone"></a>
      <a href="#" className="bds_tsina" data-cmd="tsina"></a>
      <a href="#" className="bds_tqq" data-cmd="tqq"></a>
    </div>
  );
};

export default ShareComponent;

自定义分享配置 可以通过修改window._bd_share_config对象来自定义分享的标题、描述、图片等参数。例如：

window._bd_share_config = {
  common: {
    bdText: '分享标题',
    bdDesc: '分享描述',
    bdUrl: 'https://example.com',
    bdPic: 'https://example.com/image.jpg'
  },
  share: [{
    "bdSize": 24,
    "bdCustomStyle": "自定义样式"
  }]
};

注意事项

react如何调用百度分享