javascript - 如何使我的对象方法全局可访问
问题描述
我正在做一个 voip 项目。我有两页,一页用于拨打电话,另一页仅用于接听电话。
我使用了一个外部 js 文件,我在其中定义了一些对象方法,因此我可以在组件中的任何地方访问它们。
问题:
我使用同一个文件来接听电话和拨打电话。(我的对象方法应该根据调用的类型做不同的事情)
我必须使用该对象中的 javascript 来操作我的 HTML。
我想要的是:
我想让我的对象方法可以从
我的组件中全局访问。能够在我的对象方法中操纵状态,以便我可以重新渲染
我的外部 js 文件(我的 voip 客户端会自动调用这些监听器)
var callListeners = {
onCallProgressing: function (call) {
audioProgress.src = './style/ringback.wav';
audioProgress.loop = true;
audioProgress.play();
//Report call stats
$('div#callLog').append('<div id="stats">Ringing...</div>');
},
onCallEstablished: function (call) {
audioIncoming.srcObject = call.incomingStream;
audioIncoming.play();
audioProgress.pause();
audioRingTone.pause();
//Report call stats
var callDetails = call.getDetails();
$('div#callLog').append('<div id="stats">Answered at: ' + (callDetails.establishedTime && new Date(callDetails.establishedTime)) + '</div>');
},
onCallEnded: function (call) {
audioProgress.pause();
audioRingTone.pause();
audioIncoming.srcObject = null;
if($('button#takeCall')) {
$('button#takeCall').addClass('d-none');
$('button#refuseCall').addClass('d-none');
}
//Report call stats
var callDetails = call.getDetails();
$('div#callLog').append('<div id="stats">End cause: ' + call.getEndCause() + '</div>');
if (call.error) {
$('div#callLog').append('<div id="stats">Failure message: ' + call.error.message + '</div>');
}
}
}
我的组件
class Recipient extends Component {
constructor() {
super()
this.state = {
name: null,
user: 'a User',
}
}
componentDidMount() {
this.CreateAccount();
}
CreateAccount() {
const name = this.state.user;
axios
.post("/api/auth", { name })
.then(res => { sinchClient.start(res.data).then(() => this.handleSuccess()); })
.catch((error) => { console.log(error) });
}
answerCall(e) {
e.preventDefault();
call.answer();
console.log(callListeners);
}
hangUpCall(e) {
e.preventDefault();
call && call.hangup();
console.log(call.getDetails());
}
handleSuccess() {
console.log('ready to receive incoming calls!')
}
renderCallArea() {
let callArea;
callArea =
<div className="frame">
<div id="call">
<form id="newCall">
<button id="takeCall" className="ml-2 btn btn-light d-none" onClick={(e) => this.answerCall(e)}>Opnemen</button>
<button id="refuseCall" className="ml-2 btn btn-dark d-none" onClick={(e) => this.hangUpCall(e)}>Weigeren</button>
<button id="leaveCall" className="ml-2 btn btn-dark d-none" onClick={(e) => this.hangUpCall(e)}>Verlaat gesprek</button>
{/* <button id="answer" onClick={(e) => this.answerCall(e)}>Answer</button> */}
</form>
</div>
<div className="clearfix"></div>
<div id="callLog">
</div>
<div className="error">
</div>
</div>;
return callArea;
}
render() {
const wrapperStyle = {
backgroundColor: 'rgba(127, 130, 160)',
minHeight: '600px',
}
const jumboStyle = {
backgroundColor: 'rgba(109, 113, 152)',
color: 'white',
borderRadius: '0'
}
return (
<div className="wrapper" style={wrapperStyle}>
<div className="jumbotron" style={jumboStyle}>
<h1 className="text-center">Wachten op een gesprek...</h1>
</div>
<div className='container mt-2'>
{this.renderCallArea()}
</div>
</div>
)
}
}
export default Recipient;
关于我应该如何实现这一目标的任何提示?
解决方案
我不是 100% 知道您所说的外部 js 文件是什么意思,但我会将其提取到您的反应应用程序中作为导入。这就是它的样子:
import React, { Component } from 'react';
import './App.css';
class External {
static onCallProgressing () {
// Do some action...
return <div>{ `Ringing...` }</div>
}
}
class App extends Component {
callExternal() {
return External.onCallProgressing()
}
render() {
return (
<div className="App">
{ this.callExternal() }
</div>
);
}
}
export default App;
如果您需要将函数的值传递给孩子:
你首先声明一个状态:
state = {
data
}
调用外部函数后设置状态
callExternal() {
this.setState({ data: External.onCallProgressing() })
}
让孩子从国家那里获得道具:
render() {
return (
<div className="App">
<MyChild data={ this.state.data } />
</div>
);
}
让孩子渲染道具:
render() {
return (
<div>
{ this.props.data }
</div>
);
}
推荐阅读
- asp.net-core - ASPNET CORE 3 浏览器永远不会用 F5 重新加载
- matomo - Matomo:在插件 API 中获取 actionDetails
- c# - How to add TimesStamp to document (ITextSharp, BouncyCastle)
- delphi - 如何捕捉 Delphi TDataSetProvider 生成的 SQL?
- ocaml - 如何从列表列表中“删除”列表以及列表中的元素?
- node.js - 如果 CORS 阻止它,如何获取 react-cookies
- sql - 我想从 Json 中提取并计算 HQL
- wordpress - 我在 Elementor Page builder 中遇到了这个问题
- visual-studio - Visual Studio Code 颜色与 Visual Studio IDE 不同
- pyqt - 如何让串行在后台和前台工作良好?