Jestem nowy, aby zareagować. Chcesz opracować aplikację za pomocą małych komponentów w oddzielnych plikach i zaimportować je do moich app.js

Próbowałem, ale nie móc dowiedzieć się, co robię źle.

Oto mój html:

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>

<script type="text/babel" src="js/App.js"></script>

</body>
</html>

To jest moja aplikacja: (z js / katalogu)

import MyComp from 'components/MyComp';

class App extends React.Component {
    render() {
        return (
            <MyComp />
        )
    }
}

ReactDOM.render(
    <App />,
    document.body
);

I to jest mój mycomp.js (z JS / Components / Directory)

class MyComp extends React.Component{

    render() {
        return (
            <div>
                Hello World!
            </div>
        )
    }

}

export default MyComp;

Jeśli spróbuję tego, nic nie widzę. Mając na uwadze, że jeśli utworzę MyComp klasa w app.js działa jak urok.

Jakąkolwiek sugestię, co robię źle?

27
Omer 25 czerwiec 2017, 11:39

3 odpowiedzi

Najlepsza odpowiedź

W większości, co powinieneś pracować, ale nie jestem do końca pewien, dlaczego nie. Polecam dodawanie "

Pozwól mi opublikować jeszcze prostszą wersję, którą znam, działa:

./index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application'

ReactDOM.render(<Application />, document.getElementById('root'));

./components/application:

import React from 'react';

class Application extends React.Component {
  render() {
    return (
      <div className="App">
        My Application!
      </div>
    );
  }
}

export default Application;

To powinno być wszystko, czego potrzeba, aby to działać.

Jeśli chcesz skrócić powyższe, wyjmując linię export na dole, mniej tradycyjne podejście określiłoby tę klasę ...

export default class Application extends React.Component {...}
21
HoldOffHunger 23 sierpień 2018, 17:11

Spróbuj z

./components/mycomp.

Jeśli korzystasz z Visual Studio Code, możesz zbadać swoje komponenty z dowolnego pliku .js, zacznij wpisywać ./ Lubię to:

enter image description here

0
blacktiago 15 luty 2020, 23:46

Powinieneś dodać: Import reaguje z "reagowania"; do aplikacji klasy rozszerza React.comPonent {...

0
Pinidbest 11 grudzień 2018, 12:25