javascript - 为什么将 .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也会返回错误。这个问题是重复的

标签： javascriptreactjsreact-native