Встраивание дочерних компонентов в ReactJS

Question

Я пытаюсь выполнить самые основные задачи: создание родительского компонента, который вызывает дочерний компонент, используя response.js.

Вот мой родительский код компонента:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import PanelTop from './PanelTop.jsx'; 

class Card extends React.Component { 
    render() { 
    return <PanelTop/> 
    } 
} 

ReactDOM.render(<Card/>, document.getElementById("card")); 

По-видимому, return <PanelTop/> бросает следующее сообщение об ошибке:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Card

PanelTop.jsx содержит:

import React from 'react'; 

export class PanelTop extends React.Component { 
    render(){ 
    return <div class="panel" id="panelTop"><button>Click Me!</button></div> 
    } 
} 

Очевидно мне не хватает что нибудь, например, как импорт и экспорт работают в ES6.

Answer 1

Это происходит потому, что вам нужно экспортировать PanelTop класс (это называется Named exports) от PanelTop.jsx, как этот

import { PanelTop } from './PanelTop.jsx'; 

или использовать default exports в PanelTop.jsx

export default class PanelTop extends React.Component { 
    // ... 
}