Question

我是React js的新手，正在尝试一个非常简单的hello反应有点网络应用程序。但是在运行时，最终在控制台中出现以下错误。

不推荐为已经托管阴影根的元素调用Element.createShadowRoot（）。有关详细信息，请参阅https://www.chromestatus.com/features/4668884095336448。

浏览器：Chrome版本46.0.24

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/react/0.14.7/react.js"></script>
        <script src="https://cdnjs.cloudfare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello React!</h1>
                document.getElementById('app')
            );
        </script>
    </body>
</html>

任何人都可以指出可能出现的问题。

提前致谢。

Answer 1

首先，您用于库文件的cdns无法访问。

在 React Docs 页面中，这些是cdn的工作链接：

https://npmcdn.com/react@15.3.1/dist/react.min.js

https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js

https://npmcdn.com/babel-core@5.8.38/browser.min.js

其次，<h1>Hello React!</h1>之后应该有逗号将应呈现的内容分隔为。

所以你的代码应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
        <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello React!</h1>,
                document.getElementById('app')
            );
        </script>
    </body>
</html>

Answer 2

您的链接已损坏。使用这些更新的链接

使用域cdnjs.cloudflare.com代替cdnjs.cloudfare.com

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js

运行react js示例Web应用程序时出现控制台错误

2 个答案: