javascript - 首先 react 代码

标签 javascript reactjs

好吧,这是我编写的第一个 React 代码。 “Hello world”代码。

但是,它似乎不起作用。我尝试了一些答案,但没有一个对我有用。

这是代码。

<html>
    <head>
        <title>Some title</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
        <script>
            ReactDOM.render(
                React.DOM.h1(null, "Hello World!"),
                document.getElementById("app")
            );
        </script>
    </body>
</html>

这是我在控制台收到的错误。

Uncaught TypeError: Cannot read property 'purgeUnmountedComponents' of undefined
    at clearHistory (react-dom.js:8499)
    at resetMeasurements (react-dom.js:8542)
    at ReactReconcileTransaction.onBeginFlush (react-dom.js:8712)
    at ReactReconcileTransaction.initializeAll (react-dom.js:14848)
    at ReactReconcileTransaction.perform (react-dom.js:14815)
    at batchedMountComponentIntoNode (react-dom.js:9835)
    at ReactDefaultBatchingStrategyTransaction.perform (react-dom.js:14816)
    at Object.batchedUpdates (react-dom.js:8862)
    at Object.batchedUpdates (react-dom.js:12944)
    at Object._renderNewRootComponent (react-dom.js:10029)

最佳答案

问题是,您正在使用缩小版的 react 和未缩小版的 react-dom,使用缩小版或不缩小版。

使用这些引用(缩小的 reactreact-dom),它会起作用:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

或者这些都没有缩小:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

运行此代码片段,检查工作示例:

<html>
    <head>
        <title>Some title</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    </head>
    <body>
        <div id="app">

        </div>
        
        <script>
            ReactDOM.render(
                React.DOM.h1(null, "Hello World!"),
                document.getElementById("app")
            );
        </script>
    </body>
</html>

关于javascript - 首先 react 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43501943/

相关文章:

Javascript:获取id为id [x]的所有元素

javascript - 如何修复 TinyMCE 的样式?

Javascript 对象 ID 字段未传递给事件处理程序

reactjs - VS Code美化react html中的break标签

javascript - 组件不会渲染

javascript - 使用 <symbol> 编写 SVG 脚本

javascript - 使用 DOM 的 Javascript 中的多列表

javascript - 如何防止第二次输入相同的字符

javascript - onclick on img 将链接到另一个页面上的特定部分

javascript - 按下 Enter 后将焦点设置在动态创建的输入字段上