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是否在单独的文件中。

我已经尝试使用导出默认类，但这产生了一个错误。根据我的搜索，它与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';

如何使用React CDN导入和导出？

1 个答案: