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导出PanelTop.jsx类（它被称为Named exports），就像这样

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

或在PanelTop.jsx

中使用default exports

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

在ReactJS中嵌入子组件

1 个答案: