如何从子 cComponent 访问 props？

Question

SipProvider来自npm包react-sip，它具有子组件可以访问的上下文（sip、call、startCall等）。 如何从子组件访问上下文。 （Dailer）

import React from 'react'
import { SipProvider } from '@evercall/react-sip'
import Dialer from '../components/Dialer'

const SipReact = () => {
    return (
        <SipProvider
        host="197.159.142.228"
        port={5060}
        pathname="/ws" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user="27329"
        password={'bB3JwU7i'} // usually required (e.g. from ENV or props)
        autoRegister={true} // true by default, see jssip.UA option register
        autoAnswer={false} // automatically answer incoming calls; false by default
        iceRestart={false} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={120} // value for Session-Expires header; 120 by default
        debug={false} // whether to output events to console; false by default
        inboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        outboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        
      >
        <Dialer  />
      </SipProvider>
  )
}

export default SipReact

根据 npm 文档，子组件（Dialer）可以访问此上下文

{
  sip: sipType,
  call: callType,

  registerSip: PropTypes.func,
  unregisterSip: PropTypes.func,

  answerCall: PropTypes.func,
  startCall: PropTypes.func,
  stopCall: PropTypes.func,
}

Dailer 有此事件处理程序

const handleCall = () => {    
    const {
      startCall,
      sip: { status: sipStatus },
      call: { status: callStatus }
    } = props;

    if ( sipStatus !== sipType.SIP_STATUS_REGISTERED) {
      return;
    }
    if ( callStatus !== callType.CALL_STATUS_IDLE ) {
      return
    }
    startCall(number)
  }

如何从 Dailer 访问 SipProvider 上下文？ 我尝试使用 props 但返回 undefied

Answer 1

子组件（Dialer）应该有权访问startCall、call、sip

你为什么这么认为？除非有一些其他相关代码未显示，否则子组件无法访问这些道具。组件只能访问您显式传递给它们的 props。这意味着在 Dialer 组件实例化中，您需要像这样传入 value props：

<Dialer startCall={startCall}/>

In order for Dialer component to have access to startCall in its props.

编辑：

既然您澄清说您正在尝试从上下文访问这些值，那么问题的措辞是错误的，您没有访问道具，您正在访问上下文值，它们是不同的东西，因此需要不同的语法。

我快速查看了库存储库，它似乎使用的是旧/旧版 React 上下文，该上下文已在 React 17 中弃用。假设您使用的是较旧的 React 版本，您可以像这样访问上下文值：

import { sipPropType, callPropType } from '@evercall/react-sip';

const SipPhone = (props, context) => {

  const Sip = context;

  const handleCall = () => {
    console.log('handleCall', '\n' , Sip)
  }

  return (
    <div>
      <Button onClick={handleCall}>Call</Button>
    </div>
  );
}

SipPhone.contextTypes = {
  sip: sipPropType,
  call: callPropType,
  
  registerSip: PropTypes.func,
  unregisterSip: PropTypes.func,
  
  answerCall: PropTypes.func,
  startCall: PropTypes.func,
  stopCall: PropTypes.func,
}

export default SipPhone;

如果您使用的是 React 17 及更高版本，那么您就不走运了，这个库将无法工作，但您可以看看其他替代方案，例如 https://github.com/OpenTelecom/react-sip-phone。我看到有些人自愿更新该软件包，但我不指望它会很快完成。

Answer 2

您必须像这样显式地将 props 传递给子组件

   const SipPhone = () => {
     return (
        <SipProvider
        host="197.159.142.228"
        port={5060}
        pathname="/ws" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user="27329"
        password={'bB3JwU7i'} // usually required (e.g. from ENV or props)
        autoRegister={true} // true by default, see jssip.UA option register
        autoAnswer={false} // automatically answer incoming calls; false by default
        iceRestart={false} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={120} // value for Session-Expires header; 120 by default
        debug={false} // whether to output events to console; false by default
        inboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        outboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        
      >
            <Dialer startCall={startCall} sip={sip} call={call}/>
      </SipPhone>
  )
}