如何使对象方法可全局访问

Question

我正在做一个voip项目。 我有2页，一页用于拨出电话，另一页仅用于接听电话。

我正在使用一个外部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;

关于如何实现此目标的任何提示？

Answer 1

我不是100％知道外部js文件是什么意思，但是我会将其作为导入提取到您的react应用中。 看起来像这样：

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>
  );
}