Question

有人可以帮助我吗？只是尝试在我的反应应用程序中嵌入一个简单的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对象？

2 个答案: