为什么将.map（）中的结果插入JSX会导致错误？

Question

有人可以帮助我理解为什么尝试在source道具中应用值时会出错吗？

我在render(){和return(之间有以下代码块。它会映射一系列本地托管的视频及其相应的路径。

render() {

const { loadVideo } = this.state;

let videoComp = [];
if(loadVideo){
  videoOptions.map((videoOptions) => {
    console.log('videoOptions console:',videoOptions.video)
    console.log('id console:',videoOptions.id)
    videoComp = (
      <Video 
        source={require(videoOptions.video)}   // this line produces an error
        key={videoOptions.id}
      />
    )
  })
}

return (

此代码按原样返回以下错误。

TransformError src/components/home/HomeScreen.js:
src/components/home/HomeScreen.js:
Invalid call at line 98:
require(videoOptions.video)

但是，如果我取出source={require(videoOptions.video)}行，错误就会消失，并且两个日志确实会吐出正确的数据。

当然，如果我要对source进行硬编码，那么一切都会好起来的。

render() {

const { loadVideo } = this.state;

let videoComp = [];
if(loadVideo){
  videoOptions.map((videoOptions) => {
    console.log('videoOptions console:', `../../assets/videos/${videoOptions.video}`)
    console.log('id console:',videoOptions.id)
    videoComp = (
      <Video 
        source={require('../../assets/videos/087194062-dodgers-stadium_608x1080.mp4')}
        key={videoOptions.id}
      />
    )
  })
}

return (

编辑：我删除了一个简短的问题，询问为什么在require中使用模板文字也会返回错误。这个问题是duplicate