时间戳

首页 > 解决方案 > 如何使用 react js 导入 Skype 对象？

reactjs - 如何使用 react js 导入 Skype 对象？

问题描述

有人可以帮我吗？只是想在我的 react 应用程序中嵌入一个简单的 Skype 按钮，但由于我明显缺乏对模块、导入、webpack 以及 create-react-app 实际执行操作的理解，我无法访问 Skype 对象。它没有定义。

我已按照指示

https://www.skype.com/en/developer/create-contactme-buttons/

我已经使用 index.html 中的脚本标签链接到 skype js <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

在我的主 js 文件中，使用 create-react-app：

loadSkype() {
        Skype.ui({
          "name": "dropdown",
          "element": "SkypeButton_Call_john23",
          "participants": ["john23"],
          "imageSize": 32
          })
      }

我无法访问该Skype对象。有任何想法吗？

这些说明听起来很简单：复制并粘贴以下代码：

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_john23_1">
 <script type="text/javascript">
 Skype.ui({
 "name": "call",
 "element": "SkypeButton_Call_john23_1",
 "participants": ["john23"]
 });
 </script>
</div>

标签： reactjsskype

解决方案

在您index.html需要导入 Skype 库：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
</body>
</html>

然后为 Skype 创建一个组件，并在您想使用它时将其导入：

import React from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class SkypeBT extends React.Component {
  componentDidMount() {
    Skype.ui({
      name: "dropdown",
      element: "SkypeButton_Call_john23",
      participants: ["john23"],
      imageSize: 32
    });
  }

  render() {
    return <div id="SkypeButton_Call_john23" />;
  }
}

const App = () => (
  <div style={styles}>
    <h2>Call me</h2>
    <SkypeBT />
  </div>
);

render(<App />, document.getElementById("root"));

你可以在这里找到一个工作版本

推荐阅读