我是 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 许可协议
每当您看到此类错误时,您都可以访问它建议的页面以查看完整的错误。所以,当打开 https://reactjs.org/docs/error-decoder.html?invariant=200 时,你可以看到
Target container is not a DOM element
,这意味着您尝试将您的应用渲染到错误的 dom 节点中。问题在这里:
var destination = document.getElementsByClassName("container");
,您需要使用
getElementById
而不是getElementsByClassName