鍍金池/ 問答/HTML/ react怎么單獨(dú)導(dǎo)出一個(gè)const生成的組件？

react怎么單獨(dú)導(dǎo)出一個(gè)const生成的組件？

map.js

import React from 'react';

const numbers = [1, 2, 3, 4, 5];
const ListItems = numbers.map((number) => <li>{number}</li>)
// console.log(typeof ListItems)
export {
    ListItems
};

App.js導(dǎo)入的map.js

import React, {
  Component
} from 'react';

import logo from './logo.svg';
import './App.css';
import Test from './test';
import Clock from './clock'
import Toggle from './toggle'
import Page from './mailbox'
import {ListItems} from './map'
class App extends Component {
  render() {
    return (
      <div className="App">
        <Test/>
        <Clock/>
        <Toggle/>
        <Page/>
       ***<ListItems/>***
       //這個(gè)地方應(yīng)該如何調(diào)用這個(gè)組件？？？？？？？？
      </div>
    );
  }
}

export default App;

在div里面使用這個(gè)ListItems組建的時(shí)候報(bào)錯(cuò)

回答
編輯回答
淡墨

map.js使用的是命名導(dǎo)出，而App.js使用的是默認(rèn)導(dǎo)入，兩者統(tǒng)一一下就好了

map.js使用默認(rèn)導(dǎo)出:

export dafault ListItems

或者App.js使用命名導(dǎo)入

import { ListItems } from './map'

==================
使用方式：

      <div className="App">
        <Test/>
        <Clock/>
        <Toggle/>
        <Page/>
       { ListItems }
       //這個(gè)地方應(yīng)該如何調(diào)用這個(gè)組件？？？？？？？？
      </div>
2017年2月27日 14:18