React-TypeScript

使用TypeScript参考资料

使用教程

1. 全局安装React脚手架:npm install -g create-react-app 

由于代码都是经过webpack打包的，所以直接使用src="./xxx.jpg"是不能请求到相关数据的

只有通过require('./xxx.jpg') webpack才知道把图片也一起打包，才能知道资源

class SvgPage extends React.Component<RouteComponentProps<any>, {}> {
       constructor() {
       super();
   }
render() {
          return(
            <iframe src={require(`../../../static/svg/${this.props.match.params.id}.svg`)}  className="svgifr"/>
          );
    }
}

根据获取的参数(比如路由传参)动态加载静态资源

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
class SvgPage extends React.Component<RouteComponentProps<any>, {}> {
  constructor() {
     super();
    }
  render() {
      let _flag: boolean = true;
      try {
        require(`../../../static/svg/${this.props.match.params.id}.svg`);
      } catch (err) {
        _flag = false;
      }
      return _flag
       ? (<iframe src={require(`../../../static/svg/${this.props.match.params.id}.svg`)}  className="svgifr"/>)
       : (<iframe src={require(`../../../static/images/404.png`)}  className="svgifr"/>) ;
    }
}
export default SvgPage;