时间戳

首页 > 解决方案 > 从 create-react-library 子文件夹导入组件

reactjs - 从 create-react-library 子文件夹导入组件

问题描述

我一直在尝试使用 create-react-library 并且到目前为止它可以工作，但我只能从 index.js 成功导入组件。如果我尝试制作另一个文件，我会收到导入错误。

文件结构是这样的

example
  \ Node Module
  \ public 
  \ src
     | App.js
     | index.js
      ...
src
  \ Patterns
  | index.js
  | button.js

目前我只能从主src的index.js中成功导入组件。有没有办法从 Patterns 等文件夹或其他文件中成功导入组件？

\ App.js（示例）导入按钮给我一个错误“无法从 neo 导入按钮”

import React from 'react'

import { ExampleComponent,Button} from 'neo'
import {Test} from 'neo/Patterns';


import 'neo/dist/index.css'

const App = () => {
  return (
  <>
  <Test />
  <Button text='Click me' />
   <ExampleComponent text="Create React Library Example " />
  </>
  )
}

export default App

标签： reactjscomponents

解决方案

请检查这是否是您要实现的目标。

index.js将像这样导出所需的组件，

import ExampleComponent from './ExampleComponent/ExampleComponent';
// ExampleComponent is placed inside a folder named ExampleComponent

import Patterns from './Patterns/Patterns';
// Patterns is placed inside a folder named Patterns

export { ExampleComponent, Patterns };

Patterns.js可以看起来像这样

import React from 'react'

const Patterns = () => {
  return <div>Patterns Component sample</div>
}

export default Patterns;

ExampleComponent.js可以看起来像这样

import React from 'react'
import styles from './styles.module.css'

const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}

export default ExampleComponent;

在消费者级别（在本例中为示例文件夹），在任何 jsx 中，就像App.js您可以引用那些导出的组件一样，

import { ExampleComponent, Patterns } from 'neo'

return (
 <Patterns />
)

推荐阅读