学习React 遇到的报错记录

最新推荐文章于 2024-07-31 23:32:47 发布

youngjqz

最新推荐文章于 2024-07-31 23:32:47 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： javascript React 前端

本文链接：https://blog.youkuaiyun.com/youngjqz/article/details/80318273

React 专栏收录该内容

4 篇文章

订阅专栏

本文记录了一个常见的React渲染问题：在尝试渲染组件时找不到对应的DOM元素。通过具体代码示例展示了错误发生的原因，并提供了如何修正该问题的方法。

学习React时遇到的报错记录

1._registerComponent(…): Target container is not a DOM element.
错误原因:在页面中找不到对应的DOM元素,
错误代码:

<body>
<div id="app"></div>   //此处的DOM元素的ID是app
</body>
<script type="text/babel">
    function MailBox(props) {
        const unreadMessage = props.unreadMessage;
        return(
            <div>
                <h1>Hello!</h1>
                {unreadMessage.length > 0 &&
                <h2>
                    You have {unreadMessage.length} unread messages.
                </h2>
                }
            </div>
        )
    }
    const message=['React','hello','cheng','hahah'];
    ReactDOM.render(
        <MailBox unreadMessage={message}/>,
        document.getElementById('root')   //此处却在查找ID为root的DOM元素进行渲染,页面中没有对应的元素,因此报错
    )
</script>