Question

我正在尝试从另一个js文件中加载react组件，但是我无法链接该文件...它说引用错误..ads未定义..我不知道如何解决此问题.. ..i我正在django中进行此操作，并且react也可以正常工作。

// home.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/home.css' %}" type="text/css"/>
     <script src="{% static 'root/react.min.js' %}"></script>
    <script src="{% static 'root/react-dom.min.js' %}"></script>
    <script src="{% static 'root/browser.js' %}"></script>
    <script src="{% static 'javascript/ads.js' %}"></script>
</head>
<body id="root">
<script type="text/babel">
    class Home extends React.Component{
        render(){
            return(
                <div id="home">
                    <Header/>
                    <div id="container">
                        <div id="left">
                            <User/>
                            <Foo/>
                        </div>
                        <Post/>
                        <div id="right">
                            <Tranding/>
                            <Ads/>
                        </div>
                    </div>
                    <div id="upload">
                        <img src="{% static 'images/large.jpg' %}"/>
                        <div id="caption">
                            <input type="text" placeholder="Write a caption"/>
                        </div>
                    </div>
                </div>
            )
        }
    }

// ads.js

export class Ads extends React.Component{
        render(){
            return(<div id="ads">
                <div id="head">Ads</div>
            </div>)
        }
    }

Answer 1

您没有在脚本中使用导入。您正在尝试使用脚本标签进行导入...这工作方式不同。您应该改用import Ads from 'javascript/ads.js'或保留脚本包含的内容，并在ads.js文件中附加window.Ads = Ads

此外，请不要忘记正确使用导出语法。应该是export default class Ads而不是export class Ads

Answer 2

请确保Ads类是从ads.js导出的。

如何将React组件链接到html？

2 个答案: