未捕获的错误:缩小 React 错误 #200

新手上路,请多包涵

我是 React 的初学者,无法调试错误

这是我在 React 中使用组件的代码。

我正在尝试使用图像、标题和链接模拟谷歌搜索图像结果,但在浏览器上我看到的只是一个空屏幕。

错误陈述是:

 Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.I.render (react-dom.production.min.js:238)
    at <anonymous>:99:10
    at n (babel.min.js:12)
    at r (babel.min.js:12)
    at o (babel.min.js:12)
    at u (babel.min.js:12)
    at E (babel.min.js:1)

该错误未指定哪一行或任何内容。链接说

你刚才遇到的错误的全文是:

目标容器不是 DOM 元素。

     <html>
        <head>
            <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id = "container"></div>
            <script type = "text/babel">
                var destination = document.getElementsByClassName("container");

                class ResImg extends React.Component{
                    render(){
                        return(
                            <img src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></img>
                        )
                    }
                }

                class ResCaption extends React.Component{
                    render(){
                        return(
                            <p>Batman 2021</p>
                        )
                    }
                }

                class ResLink extends React.Component{
                    render(){
                        return(
                            <a href = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.insider.com%2Fthe-batman-2021-movie-details-information-2020-2&psig=AOvVaw0AeAaWCyxcHCYi3PRMc6VS&ust=1601364735924000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJi85taqi-wCFQAAAAAdAAAAABAD"></a>
                        )
                    }
                }

                class SearchRes extends React.Component{
                    render(){
                        return(
                            <div>
                                <ResImg/>
                                <ResCaption/>
                                <ResLink/>
                            </div>
                        )
                    }
                }

                ReactDOM.render(
                    <SearchRes/>,destination
                )
            </script>
        </body>
    </html>

原文由 Savannah Madison 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.7k
2 个回答

每当您看到此类错误时,您都可以访问它建议的页面以查看完整的错误。所以,当打开 https://reactjs.org/docs/error-decoder.html?invariant=200 时,你可以看到

Target container is not a DOM element ,

这意味着您尝试将您的应用渲染到错误的 dom 节点中。问题在这里:

var destination = document.getElementsByClassName("container"); ,

您需要使用 getElementById 而不是 getElementsByClassName

原文由 Anastasiia Solop 发布,翻译遵循 CC BY-SA 4.0 许可协议

只是改变这个

var destination = document.getElementsByClassName("container");

var destination = document.getElementById("container");

原文由 MubashirEbad 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题