Question

我们说我有一个名为CountryFlag的React.js组件。我还在countries/

的每个国家/地区的旗帜上都有一个SVG图像目录

这个组件需要一个道具 - countryCode。对于西班牙来说，这将是ES。

当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

中动态使用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"}>

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

3 个答案: