React组件未呈现

Question

令人尴尬的问题，但我们走了。

我有一个layout.js文件应该呈现我的React组件。

Layout.j：■

import React, { Component } from 'react'
import MainNavbar from './Navbar'
import AddButton from './AddButton'

export default class Layout extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <AddButton />
      </div>
    )
  }
}

Navbar组件工作正常，但我的AddButton根本不会显示。我已经尝试了console.log - 从中​​获取并且没有任何内容在控制台中输出。所以我想我的问题与我的组件没有被链接有关。

这是不会显示的文件：

AddButton.js：

import React, { Component } from 'react'
import { Button } from 'react-bootstrap'

export default class AddButton extends Component {
  render() {
    console.log('hejsan')
    return (
      <div>
        helloooooo
      </div>
    )
  }
}

以下是index.js文件：

index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

import Layout from './components/Navbar'

const app = document.getElementById('root')

ReactDOM.render(<Layout />, app)

我打赌我的问题是超级基本的，但我不知道如何解决这个问题。 谢谢你的阅读！

Answer 1

所以错误是非常基本的，你从Layout导入了Navbar，这只是你的Navbar组件，因此只会呈现Navbar，而你应该有从Layout.js

导入

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

import Layout from './components/Layout'

const app = document.getElementById('root')

ReactDOM.render(<Layout />, app)

同样在Layout.js中更改

import MainNavbar from './Navbar'

到

import Navbar from './Navbar'