Tengo las siguientes importaciones en mi proyecto:

 import video1 from '../../assets/video1.mp4'; import video2 from '../../assets/video2.mp4';

y el siguiente código:

 ... constructor(props){ super(props) this.state={ videoURL: this.props.source, } } render(){ return( <div className='app'> <video onTimeUpdate={(e) => this.videoBuffer(e)} id="videoPlayer" ref="VidRef" src={this.state.videoURL} muted={this.state.muteVideo} onClick={(e) => this.togglePlayPause(e)} autoPlay></video> </div> )}

después de recuperar los accesorios de otro componente, aparecen como una cadena, es decir, "video1" y "video2", que luego se pasan al src del componente de video. Desafortunadamente, no puedo renderizar el componente de video como

 src="video1"

no es válido. ¿Hay alguna manera de convertir "video1" a la importación que hice arriba en la línea 1? como tengo miles de videos, no puedo usar matrices.

Tampoco quiero usar peligrosamente setinnerhtml para evitar cualquier apertura a los ataques xss.