Uncaught Error: Minified React error #200

Question

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

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

我正在尝试使用图像、标题和 Link 模拟 google 搜索图像结果，但在浏览器上我看到的只是一个空白屏幕。

错误语句是：

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)

错误未指定是哪一行或任何内容。 link 说

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>

Answer 1

只需更改此

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

至

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

Answer 2

你的代码中有你正在尝试的

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

它是return个元素数组你必须做什么才能像这样使用它

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

因为你正在使用 id="container" 所以你必须使用它。

Answer 3

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

Target container is not a DOM element,

意味着您尝试将您的应用呈现到错误的 dom 节点中。问题在这里：

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

您需要使用 getElementById 而不是 getElementsByClassName

Uncaught Error: Minified React error #200

Uncaught Error: Minified React error #200

html

javascript

frontend

reactjs

babeljs