Javascript 如何根据道具的值使用React.js、ES6和Webpack导入文件？

假设我有一个React.js组件，名为

CountryFlag

。我还在

countries/

此组件采用单个道具-

countryCode

。对于西班牙来说，这将是类似于ES

当

this.props

不在范围内时，如何使用带有

this.props.countryCode

的ES6

导入

构造

我曾尝试在

componentDidMount（）

中执行此操作，但出现语法错误：

Syntax error: 'import' and 'export' may only appear at the top level (6:2)

---

您应该使用

require

。比如：

class Whatever extends Component{
  constructor(props) {
    super(props);
    this.countryImage = null;
  }
  componentDidMount() {
    const { countryCode } = this.props;
    this.countryImage = require(`./countries/${countryCode}.svg`); 
  }
  render() {
    return (
      <img src={this.countryImage} alt="Whatever" />
    );
  }
}

class扩展组件{
建造师（道具）{
超级（道具）；
this.countryImage=null；
}
componentDidMount（）{
const{countryCode}=this.props；
this.countryImage=require（`./countries/${countryCode}.svg`）；
}
render（）{
返回(
);
}
}

您应该使用

要求

。比如：

class Whatever extends Component{
  constructor(props) {
    super(props);
    this.countryImage = null;
  }
  componentDidMount() {
    const { countryCode } = this.props;
    this.countryImage = require(`./countries/${countryCode}.svg`); 
  }
  render() {
    return (
      <img src={this.countryImage} alt="Whatever" />
    );
  }
}

class扩展组件{
建造师（道具）{
超级（道具）；
this.countryImage=null；
}
componentDidMount（）{
const{countryCode}=this.props；
this.countryImage=require（`./countries/${countryCode}.svg`）；
}
render（）{
返回(
);
}
}

您可以使用

系统。在
componentDidMount

constructor(props) {
  super(props)

  this.state = { component: null }
}
componentDidMount() {
    this.loadComponent(component => this.setState({ component }));
}
loadComponent = callback => {
    let component = null;
    // This needs to be relative to the current module otherwise Webpack won't know where to look
    System.import(`./countries/${this.props.countryCode}`).then(module => callback(component = module))
    return component;
}

您可以使用
System.import
在
componentDidMount

constructor(props) {
  super(props)

  this.state = { component: null }
}
componentDidMount() {
    this.loadComponent(component => this.setState({ component }));
}
loadComponent = callback => {
    let component = null;
    // This needs to be relative to the current module otherwise Webpack won't know where to look
    System.import(`./countries/${this.props.countryCode}`).then(module => callback(component = module))
    return component;
}

你也可以使用你的道具在src你的形象。
差不多
您也可以使用src上的道具来创建您的图像。
差不多
您不会这样做，您只需引用他们的url并将图像托管在CDN上，就我所知，您无法导入基于属性的内容。需要这个帮助吗您可以在组件中导入Isvg模块，然后将Isvg src作为属性值
@Callumlington:我会这样做，但我将它捆绑用于生产，需要使用Webpack来完成此操作。@Jayce444:谢谢！你不会这么做的，你只是引用他们的url，把图片放在一个CDN上。你不能导入基于属性的东西（据我所知）。需要这个帮助吗您可以在组件中导入Isvg模块，然后将Isvg src作为属性值
@Callumlington:我会这样做，但我将它捆绑用于生产，需要使用Webpack来完成此操作。@Jayce444:谢谢！这不会阻止Webpack捆绑SVG吗？真的不确定，但我对此没有问题。仅使用“写入图像的正确路径”）这不会阻止Webpack捆绑SVG吗？真的不确定，但我对此没有问题。只需写下正确的图片路径）谢谢！这会允许Webpack捆绑SVG吗？为什么确切地导入而不需要？前者将产生一个新的块，这可能是也可能不是理想的行为。你可以试试看。并已替换为
import（）
（函数）谢谢！这会允许Webpack捆绑SVG吗？为什么确切地导入而不需要？前者将产生一个新的块，这可能是也可能不是理想的行为。你可以试试看。并已替换为
import（）
（函数）