如何在React NX Monorepo中创建并使用共享组件库

兄弟，先给你纠正个小误区：你完全不用创建名为libs的应用！NX在初始化monorepo的时候，默认就会在根目录生成libs文件夹（除非你选了特别的初始化配置），这个文件夹就是专门用来放可复用库代码的，把库做成app是完全搞错方向啦～ 下面我一步步给你说正确的操作：

1. 创建共享组件库 #

用NX的官方生成器命令来创建React组件库，这是最标准的方式，会自动帮你配置好路径别名、构建脚本、导出规则这些麻烦事：

# 创建一个叫ui-shared的React组件库，放在shared目录下，用css样式（可换成scss/less）
npx nx g @nrwl/react:lib ui-shared --directory=shared --style=css

• ui-shared是库的名字，你也可以叫shared-components，怎么好记怎么来
• --directory=shared会把库代码放在libs/shared/ui-shared下面，方便你后续按功能分类管理多个库
• --style=css指定样式方案，根据你的项目需求换就行

执行完命令，去libs目录看看，对应的文件夹已经生成好了，里面有默认的组件模板，还有个index.ts专门用来导出公共API，方便其他应用导入。

2. 在库中添加你需要的共享组件 #

进入组件库的源码目录，比如libs/shared/ui-shared/src/lib，创建Tabs.tsx、Search.tsx这些你需要的组件。举个简单的Search组件例子：

// libs/shared/ui-shared/src/lib/search/Search.tsx
import React from 'react';

// 定义组件的props类型
export interface SearchProps {
  placeholder?: string;
  onSearch: (value: string) => void;
}

export const Search = ({ placeholder = "请输入关键词", onSearch }: SearchProps) => {
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onSearch(e.target.value);
  };

  return (
    <input
      type="text"
      placeholder={placeholder}
      onChange={handleInputChange}
      style={{ padding: '8px 12px', border: '1px solid #eee', borderRadius: '4px' }}
    />
  );
};

组件写好后，一定要在库的index.ts里导出，这样其他应用才能找到它：

// libs/shared/ui-shared/src/index.ts
// 把你创建的所有共享组件都导出
export * from './lib/search/Search';
export * from './lib/tabs/Tabs';

3. 在应用中导入并使用共享组件 #

现在就可以在你的todo-list或者admin应用里用这些组件啦！NX已经帮你配置好了路径别名，直接用工作区名称+库的路径导入就行：
比如在todo-list的主组件里用：

// apps/todo-list/src/app/app.tsx
import React from 'react';
// 这里的your-workspace-name是你初始化NX时填的工作区名称，去nx.json里就能找到
import { Search, Tabs } from '@your-workspace-name/shared/ui-shared';

export function App() {
  const handleSearch = (value: string) => {
    console.log('用户搜索的内容:', value);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Search placeholder="搜索待办事项" onSearch={handleSearch} />
      <br /><br />
      <Tabs tabs={[
        { label: '待办任务', key: 'pending' },
        { label: '已完成', key: 'completed' }
      ]} />
    </div>
  );
}

export default App;

找不到工作区名称？打开根目录的nx.json，里面的name字段就是啦！

4. 验证一下效果 #

运行你的应用，看看共享组件能不能正常工作：

npx nx serve todo-list

如果一切顺利，你就能在页面上看到共享的Search和Tabs组件啦！

最后再啰嗦一句：之前你创建的那个叫libs的应用，直接删掉就行，它完全不是NX约定的可复用库的形式，用上面的方法生成的库才是能被多个应用轻松复用的正确打开方式～

备注：内容来源于stack exchange，提问作者SnailCode