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

【问题标题】：import components from create-react-library subfolder从 create-react-library 子文件夹导入组件
【发布时间】：2020-09-20 00:09:03
【问题描述】：

我一直在尝试使用 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

【问题讨论】：

标签： reactjs components

【解决方案1】：

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

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 />
)

【讨论】：