reactjs - 在 ReactJS 中嵌入子组件

Question

我正在尝试最基本的任务:创建一个使用react.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.jsx 导出 PanelTop 类(称为 Named exports )，如下所示

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

或使用default exports在PanelTop.jsx

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