reactjs - How to loop through array of MediaStreams and render a <video> with each one?

Question

I have a React class component that has two props, one of which is an array of MediaStreams that I want to loop through and then render a video tag for.

My issue is that you can't just set srcObject to the stream, you have to use a ref. How can I make an array of refs so that there is one ref for each MediaStream so that I can render it as a ? Or is there some other way to loop and render a new and set srcObject?

Here is the code for the Component:

import React, { Component } from "react";
const electron = window.require('electron');

export class Video extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log("Video component streams: " + this.props.vid); // vid is the prop with the MediaStreams
    console.log("Video component count " + this.props.num); // Num is just how many MediaStreams there are
      return (
        // Loop through MediaStreams and make video tags here
        <video
        id="video_player"
        className="main-user-video"
        // style={
        //   this.state.knocking.callAccepted
        //     ? null
        //     : { filter: "grayscale(100%)" }
        // }
        controls={false}
        ref={this.vidRef}
        autoPlay={true}
      ></video>
      );
  }
}
export default Video;

Answer 1

等待大神答复