如何使用 React cdn 进行导入和导出？

Question

有谁知道您是否可以使用 React cdn 导出/导入组件？

我正在尝试从另一个文件中导出一个类组件，以便我可以路由/链接到它。

class RouteC extends React.Component {
  btnClickA() {
    browserHistory.push('/a');
  }

  btnClickB() {
    browserHistory.push('/b');
  }

  render() {
    return(
      <div>
        <h2>Route C</h2>
        <div>
          <button className="btn btn-default" onClick={ this.btnClickA }>Goto A</button>
          <button className="btn btn-default" onClick={ this.btnClickB }>Goto B</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={RouteA} />
    <Route path="/a" component={RouteA} />
    <Route path="/b" component={RouteB} />
    <Route path="/c" component={RouteC} />
    <Route path="*" component={RouteA} />
  </Router>,
  document.getElementById('app')
);

我正在尝试做与此类似的事情 (https://codepen.io/lsmoura/pen/pNPOzp)，但想象一下组件 A 和 B 是否位于单独的文件中。

我已经尝试过使用export default class，但这会产生错误。从我的搜索来看，它与 CommonJS 和 ES6 有关。我不想使用 webpack 或 browserify，因为我不确定如何将它与我的后端（Flask）集成。任何建议或帮助将不胜感激，谢谢。

Answer 1

将整个RouteA类组件复制到另一个文件/src/Components/RouteA中，添加import React from 'react';并添加export default RouteA。最终版本应该如下

import React from 'react';

class RouteA extends React.Component {
  btnClickB() {
    browserHistory.push('/b');
  }
  btnClickC() {
    browserHistory.push('/c');
  }

  render() {
    return(
      <div>
        <h2>Route A</h2>
        <div>
          <button className="btn btn-default" onClick={ this.btnClickB }>Goto B</button>
          <button className="btn btn-default" onClick={ this.btnClickC }>Goto C</button>
        </div>
      </div>
    );
  }
}

export default RouteA;

然后在需要的时候导入RouteA。

import RouteA from './src/Components/RouteA';