React组件未渲染

Question

令人尴尬的问题，但我们继续。

我有一个layout.js文件，应该渲染出我的React组件。

Layout.j：s

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 -ging，但控制台中没有任何输出。 所以我想我的问题与我的组件未链接有关。

这是不会显示的文件：

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

因此，错误是非常基本的，您已从Navbar导入了Layout ，而这只是您的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'