代码之家 › 专栏 › 技术社区 › M_Armendariz

渲染所需节点中的组件

reactjs

M_Armendariz · 技术社区 · 6 年前

我正在使用TokBox和OpenTok React创建视频聊天。

我试图在某个节点后添加一个组件(也就是HTML元素)。

在我当前的应用程序中,我正在做类似的事情,在需要的地方添加元素(否则它不会显示在我需要的“栏”上)。

// Creation of audio control
addAudioButton = (targetNode) => {
 var audioButton = document.createElement("button");
 audioButton.id = ("audio" + this.props.subId); 
 audioButton.className = "OT_edge-bar-item OT_mute OT_mode-auto"; 
 audioButton.onclick = this.toggleAudio; 
 audioButton.setAttribute("type","button");
 targetNode.insertBefore(audioButton,targetNode.children[4]);
}

为了访问代码,我这样做:(之前我使用了document.getElementByID,但我遇到了很多问题,因为有时它“不存在”。+

// Mute or unmute selected stream
toggleAudio = () => { 
let audioButton = ReactDOM.findDOMNode(this).children[0].children[6];
if(this.state.audio) { 
    audioButton.classList.add("OT_active");  // Add a class if is clicked to mute let stream = 
this.props.name.includes("Audio") ? this.props.name : this.props.name+"Audio" 
this.props.muteStream(stream); 
} 
else { 
    audioButton.classList.remove("OT_active");  // remove a class if is clicked to unmute let stream = 
this.props.name.includes("Audio") ? this.props.name : this.props.name+"Audio" 
this.props.muteStream(stream); } this.setState(prevState => ({ audio: !prevState.audio })); 
}

但是这样组件就没有单一的责任,所以我想为“控件”创建另一个组件,但是我不知道如何在需要的地方呈现该组件。

我试过这样做:

<OTSubscriber> <SubControls/> </OTSubscriber>

其中otsubscriber由包提供,但subcontrol从不呈现(我已签入HTML和视图)。

有没有办法做到这一点?可能有点像

render.desirednode() {
    return( SUBCONTROLS HERE);
}

事先谢谢。

编辑:

我要做的是能够呈现这样的东西:

<otsubscriber><分包控制/></otsubscriber>

从技术上讲,这是可行的,但它不提供任何东西。使用浏览器工具,HTML不显示任何内容。使用React工具,它只显示灰色

1 回复 | 直到 6 年前

M_Armendariz 6 年前

经过长时间的尝试,我找到了一个使用门户的解决方案。我把这个贴出来作为一个答案,以防其他人也有类似的问题。

我使用NPM包提供的组件的组件如下所示:

componentDidMount() {       
        this.subscriber.current.node.classList.add("stream-container")
        if(this.props.hide)
            ReactDOM.findDOMNode(this).parentElement.classList.add("Hide");

        if(this.subscriber.current && !this.state.renderControls)
            this.setState({renderControls: true});
    }

    render() {
        if(this.state.error) {
            return(
                <div>{this.state.error}</div>
            );
        }
        else {
            return(
                <Fragment>
                    <OTSubscriber
                    ref={this.subscriber}
                    session={this.props.session}
                    stream={this.props.stream}
                    properties={{
                        subscribeToAudio: this.props.audio,  // set the state of the audio of the stream
                        subscribeToVideo: this.state.video,  // set the state of the video of the stream
                        showControls: false,                 // Hide provided controls to make custom control bar
                        //restrictFrameRate: true,           // let user restrict framerate by prop in index?
                    }}                    
                    onError={this.onError}
                    />
                    {this.state.renderControls ? 
                        <SubscriberControls subscriberRef={this.subscriber} subscriberId={this.props.subscriberId}/> : null
                    }
                </Fragment>
            );            
        }
    }

如你所见,我正在使用refs。所以在构造函数内部,我有这段代码:

this.subscriber = React.createRef();

现在,我必须向状态添加一个新变量,因为我需要对render方法输入两次react。

获取otsubscriber的引用。
呈现subscriberControls组件。

现在,我的SubscriberControls组件如下所示:

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import './SubscriberControls.css';

export default class SubscriberControls extends Component {

    render() {
        return ReactDOM.createPortal(
            <Fragment>
                <button 
                    type="button"
                    id={"audio" + this.props.subscriberId}
                    className="OT_edge-bar-item OT_mute OT_mode-auto"
                >                
                </button>
            </Fragment>,
            this.props.subscriberRef.current.node.childNodes[0]      
        );
    }
}

通过这种方式,我实现了将subscriberControls添加为otsubscriber div容器的子元素。