在 ReactJS 中嵌入子组件答案

【问题标题】：Embedding child components in ReactJS在 ReactJS 中嵌入子组件
【发布时间】：2016-01-19 06:15:05
【问题描述】：

我正在尝试最基本的任务：使用 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 中的导入和导出如何工作。

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

发生这种情况是因为您需要从PanelTop.jsx 导出PanelTop 类（称为Named exports），像这样

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

或在PanelTop.jsx 中使用default exports

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

【讨论】：