问题遇到的现象和发生背景
框架:React+Flask
我有两个页面:A页面传递一个参数(音频文件名)给B页面,B页面将拿到的这个参数拼接成路径,并通过video-react组件渲染。现在的问题是require不接受变量,并报
Error: Cannot find module '../../replay_data/replay_2022-03-09_18_24_23.mp4'的错误。
问题相关代码,请勿粘贴截图
B页面取得A页面传参:
constructor(props) {
super(props);
this.state = {
collapsed: true,
replay_filename : '',
filepath : "../../replay_data/" + props.location.state.filename,
filename : props.location.state.filename
};
}
渲染video-react组件:
<Player
ref ={c => {
this.player = c;
}}
poster="https://video-react.js.org/assets/poster.png"
>
<source
src={require( this.state.filepath ).default}
type="video/mp4"
/>
<ControlBar autoHide={false} disableDefaultControls={false}>
<ReplayControl seconds={10} order={1.1} />
<ForwardControl seconds={30} order={1.2} />
<PlayToggle />
<CurrentTimeDisplay order={4.1} />
<TimeDivider order={4.2} />
<PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
<VolumeMenuButton />
</ControlBar>
</Player>