未捕获的错误：缩小的 React 错误 #200
[英]Uncaught Error: Minified React error #200
问题描述
I am a beginner in React,Not able to debug the error
我是 React 初学者，无法调试错误
This is my code using components in React.这是我在 React 中使用组件的代码。
I am trying to simulate a google Search Image result with Image,caption and Link, but on the browser all I see is an empty screen.我正在尝试使用图像、标题和链接模拟 google 搜索图像结果，但在浏览器上我看到的只是一个空屏幕。
The error statement is :错误语句是：
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)
The error doesn't specify which line or anything.该错误未指定哪一行或任何内容。 and the link says链接说
The full text of the error you just encountered is:
Target container is not a DOM element.
<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>3 个解决方案
解决方案1
10 已采纳 2020-09-28 08:05:58
Whenever you see such an error you can visit the page it suggests to see the full error.每当您看到此类错误时，您都可以访问它建议查看完整错误的页面。 So, when opening https://reactjs.org/docs/error-decoder.html?invariant=200 , you can see that所以，当打开https://reactjs.org/docs/error-decoder.html?invariant=200 时，你可以看到
Target container is not a DOM element , Target container is not a DOM element ，
meaning that you try to render your app into a wrong dom node.这意味着您尝试将您的应用程序渲染到错误的 dom 节点中。 The problem is here:问题在这里：
var destination = document.getElementsByClassName("container"); , ,
you need to use getElementById instead of getElementsByClassName您需要使用getElementById而不是getElementsByClassName
解决方案2
3 2020-09-28 07:54:06
Just change this只需改变这个
var destination = document.getElementsByClassName("container");
to到
var destination = document.getElementById("container");
解决方案3
0 2020-09-28 07:56:28
There is in your code you are trying this在你的代码中有你正在尝试这个
var destination = document.getElementsByClassName("container");
it return array of elements where what you have to do it to use it like this它返回元素数组，您必须这样做才能像这样使用它
var destination = document.getElementById("container");
as you are using id="container" so you have to use it.当您使用 id="container" 时，您必须使用它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.