Question

页: 1 • 必须在单独档案中开发一个小部分的仪器,并将其输入我的申请。

我试图,但不能说我做错了。

www.un.org/Depts/DGACM/index_spanish.htm 页: 1

<!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/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/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>

www.un.org/Depts/DGACM/index_spanish.htm 这是我的申请:。 (From js/Directory)

import MyComp from  components/MyComp ;

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

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

www.un.org/Depts/DGACM/index_spanish.htm 这也是我的《我的好战报》。 (js/components/Directory)

class MyComp extends React.Component{

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

}

export default MyComp;

如果我试图这样做,我看不到什么。如果我创建<代码>MyComp, 它在App.js的班级是一家药店。

任何建议,我究竟做什么是错的?

Answer 1

在很大程度上,你们应该做些什么,但我不敢肯定为什么这样做。我建议将“./”添加到进口地点,但如果这不正确,就会出错,而不会 silent。

Allow me to post an even simpler version which I know does work:

./index.js :

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

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

附录

import React from  react ;

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

export default Application;

www.un.org/Depts/DGACM/index_spanish.htm 这应当是使其发挥作用所需要的一切。

If you want to shorten the above even more, by removing the export line at the bottom, a less traditional approach would be defining the class like this...

export default class Application extends React.Component {...}

Answer 2

提交人

页: 1

如果你使用视力演播室代码,你可以开始打字,从任何卷宗中探讨你的内容。类似:

Answer 3

you should add: import React from react ; to the class Application extends React.Component {...

Answer 4

Also, if you want to import components from another directory, use "../" Example: import Navigation from "../MainPage/Navigation";

Answer 5

I found an answer to this from Nhum here - Unable to import JS files with a project using CDN links (react, reactDOM)

如果你重新利用CDN链接,获得您必须重新界定你想要进口的单元,并在所有带有反应代码的文字要素中使用数据插图=“变形-2015-模块。此处适用:

<!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/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel" src="js/components/MyComp.js" data-plugins="transform-es2015-modules-umd"></script>
</head>
<body>

<script type="text/babel" src="js/App.js" data-plugins="transform-es2015-modules-umd"></script>

</body>
</html>

然后,《反应法》应当成功实施。

友情链接