Импортировать субкомпонент, используя reactjs cdn - PullRequest
Новая
       34

Импортировать субкомпонент, используя reactjs cdn

0 голосов
/ 18 января 2020

Я пытаюсь использовать ReactJS в моем существующем приложении, используя эту ссылку

Index.blade. html: 

    @extends('vendor::theme.layout.master')

    @section('page-content')

    <div id="like_button_container"></div>

    @endsection

    @push('scripts-footer')

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Load our React component. -->

    <script src="{{ asset('theme_assets/js/react/likebutton.js') }}"></script>

    @endpush

likebutton. js: 


'use strict';

import { Header } from './layouts/header';

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    // Display a "Like" <button>
    return (
      <div>      
      <button onClick={() => this.setState({ liked: true })}>
        Like
      </button>
      <Header />
      </div>
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

header. js: 

'use strict';

class Header extends React.Component {
    render() {        
        return (
            <div>hello</div>
        );
    }
}

Я получаю ошибку как require not defined, поскольку утилита import не является функцией vanilla javascript.

Итак, как мне импортировать подкомпоненты из основного компонента?

Примечание. Я хочу добавить только один сценарий в html и подкомпонент автоматического импорта js.

...