Как импортировать и экспортировать с помощью React cdn?

Кто-нибудь знает, можно ли экспортировать / импортировать компонент с помощью компакт-диска React?

Я пытаюсь экспортировать компонент класса из другого файла, чтобы я мог направить его / связать с ним.

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. Я не хочу использовать веб-пакет или просматривать, поскольку я не уверен, как интегрировать это с моим бэкэндом, которым является Flask. Мы будем очень благодарны за любые предложения или помощь, спасибо.


reactjs react-router cdn react-component
person atlee19    schedule 23.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Скопируйте весь компонент класса 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';

person Isaac    schedule 23.08.2019
comment
Я не думаю, что вы можете использовать операторы импорта / экспорта с cdn? Если мне не нужен установленный ES6? - person atlee19; 26.08.2019