如何根据prop的值使用React.js，ES6和Webpack导入文件？

Question

假设我有一个名为CountryFlag的React.js组件。 我还为每个countries/地区的国旗提供了SVG图片目录

该组件采用单个prop- countryCode 。 例如西班牙的ES 。

当this.props不在范围内时，如何将ES6 import构造与this.props.countryCode this.props ？

我尝试在componentDidMount()执行此操作，但收到语法错误：

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

Answer 1

您应该使用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" />
    );
  }
}

Answer 2

您可以利用System.import在componentDidMount中动态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;
}

Answer 3

您也可以将src上的道具用于图像。 类似于<img src={"./img/" + this.props.country + ".svg"}>