未捕获的错误：缩小的 React 错误 #200
Posted
技术标签:
【中文标题】未捕获的错误：缩小的 React 错误 #200【英文标题】：Uncaught Error: Minified React error #200 【发布时间】：2021-01-13 18:54:30 【问题描述】：我是 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>【问题讨论】：
您是否尝试过使用未缩小的开发环境来处理完整的错误和其他有用的警告 我应该下载未缩小的开发环境吗？ 我不知道该消息的含义，我只是想知道您是否遵循了错误消息中给出的建议 -Target container is not a DOM element. 对您意味着什么？
投票以typo-type问题结束。
1.你需要document.getElementById("container") 2. 如果容器有一个类，你会需要var destination = document.getElementsByClassName("container")[0];，因为它返回一个集合。 3. 如果它有一个类并且你想要第一个，那么你应该改用var destination = document.querySelector(".container");。
【参考方案1】：
每当您看到此类错误时，您都可以访问它建议的页面以查看完整错误。所以，当你打开https://reactjs.org/docs/error-decoder.html?invariant=200 时，你可以看到
Target container is not a DOM element,
意味着您尝试将您的应用程序渲染到错误的 dom 节点。问题出在这里：
var destination = document.getElementsByClassName("container");,
您需要使用getElementById 而不是getElementsByClassName
【讨论】：
【参考方案2】：你的代码中有你正在尝试这个
var destination = document.getElementsByClassName("container");
它返回元素数组 你必须做什么才能像这样使用它
var destination = document.getElementById("container");
因为你正在使用 id="container" 所以你必须使用它。
【讨论】：
【参考方案3】：改一下
var destination = document.getElementsByClassName("container");
到
var destination = document.getElementById("container");
【讨论】：
以上是关于未捕获的错误：缩小的 React 错误 #200的主要内容，如果未能解决你的问题，请参考以下文章
React - 未捕获的类型错误：无法读取未定义的属性“func”