react 导出文件

在React中，导出文件通常用于模块化开发，将相关的组件、函数或样式分离到单独的模块，以便于管理代码结构并提高复用率。以下是几种常见的导出方式：

1. **单个组件导出**：

// File: components/Button.js
import React from 'react';

const Button = (props) => {
  // 组件代码...
};

export default Button;

在另一个文件中导入这个组件：

// File: App.js
import Button from './components/Button'; // ES6语法
// 或者
const Button = require('./components/Button'); // CommonJS语法

function App() {
  return <Button />;
}

2. **导出函数或值**：

// File: helpers/utils.js
function capitalize(text) {
  // 函数体...
}

module.exports = { capitalize };

然后在其他地方导入并使用：

// File: App.js
const { capitalize } = require('./helpers/utils');
console.log(capitalize('hello')); // 输出 "Hello"

3. **导出整个模块**：
如果一个文件中有多个相关的导出项，可以使用`export`关键字加上需要导出的对象数组或对象字面量：

// File: features/index.js
export { FeatureA, FeatureB };

// 或者
export const featureC = ...;
export function featureD() {...};

导入时直接引用即可。