【React】react怎么单独导出一个const生成的组件？

• Z时代
• 2024-01-10
• 分类：技术分享

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导入的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/>***
//这个地方应该如何调用这个组件？？？？？？？？
</div>
);
}
}
export default App;

回答

map.js使用的是命名导出，而App.js使用的是默认导入，两者统一一下就好了

map.js使用默认导出:

export dafault ListItems

或者App.js使用命名导入

import { ListItems } from './map'

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

      <div className="App">
        <Test/>
        <Clock/>
        <Toggle/>
        <Page/>
       { ListItems }
       //这个地方应该如何调用这个组件？？？？？？？？
      </div>

以上是 【React】react怎么单独导出一个const生成的组件？ 的全部内容， 来源链接： utcz.com/a/76155.html