javascript - React - 错误：目标容器不是 DOM 元素

Question

我刚开始使用 React，所以这可能是一个非常简单的错误，但我们开始吧。以下代码总是向我抛出以下消息：错误：目标容器不是 DOM 元素。此外，它表明最后一行（渲染）有问题。我正在研究 LinguiJS 的教程，我使用他们的代码，所以我很困惑为什么这不起作用。

我尝试替换render并ReactDOM.render调整导入，但我收到了同样的错误。任何帮助将不胜感激！

//index.js

import React from 'react'
import { render } from 'react-dom'
import Inbox from './Inbox.js'
import catalogCs from './locales/cs/messages.js'

import { I18nProvider } from '@lingui/react'

const catalogs = { cs: catalogCs };
const App = () => (
  <I18nProvider language="cs" catalogs={catalogs}>
    <Inbox />
  </I18nProvider>
)

render(<App />, document.getElementById('app'))

第二个文件：

//Inbox.js
import React from 'react'
import { Trans } from '@lingui/macro'
import {Link} from 'react-router-dom';


const Inbox = ({ messages, markAsRead, user }) => {
   const messagesCount = messages.length
   const { name, lastLogin } = user

   return (
      <div>
        <h1><Trans>Message Inbox</Trans></h1>

        <p>
          <Trans>
          See all <Link to="/unread">unread messages</Link>{" or "}
          <a onClick={markAsRead}>mark them</a> as read.
          </Trans>
        </p>

        <p>
          {
            messagesCount === 1
              ? `There's ${messagesCount} message in your inbox.`
              : `There're ${messagesCount} messages in your inbox.`
          }
        </p>

        <footer>
          Last login on {lastLogin}.
        </footer>
      </div>
   )
}

export default Inbox;

标签： javascriptreactjs

Answer 1

我找到了我的问题的答案。这很简单；in index.html 是id=root，因此我只需要更改render(<App />, document.getElementById('app'))为render(<App />, document.getElementById('root'))