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

Question

有人能帮我吗？只是试图在我的 React 应用程序中嵌入一个简单的 Skype 按钮，但由于我明显缺乏对模块、导入、webpack 以及 create-react-app 实际上如何做它所做的理解，我无法访问 Skype 对象。它没有定义。

我已按照指示操作

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

我在 index.html 的 <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

中使用脚本标签链接到 Skype js

在我的主 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>

Answer 1

此代码段为您的网站创建了一个按钮，如果您需要创建一个对象，那么您应该创建一个新的 div 元素并将 ID 设置为 SkypeButton_Call_john23_1。然后您需要创建一个脚本元素并将 json 放入其中。

loadSkype() {
    var div = document.createElement('div');
    div.id = 'SkypeButton_Call_john23_1';

    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.value =
        Skype.ui({
            "name": "call",
            "element": "SkypeButton_Call_john23_1",
            "participants": ["john23"]
        });

    div.appendChild(s);
    return div;
}

Answer 2

在您的 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"));

您可以在 here

中找到可用版本

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

how do import the Skype object using react js?

skype

reactjs