时间戳

首页 > 解决方案 > 有没有办法在像 Angular 这样的 ReactJS 中为组件（如逻辑、html 和 CSS）制作单独的文件？

javascript - 有没有办法在像 Angular 这样的 ReactJS 中为组件（如逻辑、html 和 CSS）制作单独的文件？

问题描述

我对 ReactJS 完全陌生。我以前在 Angular 中工作过我的办公室工作，我喜欢它的组织方式，因为逻辑文件（component.ts 或 module.ts、scss 和 HTML）文件是分开的。我已经开始在 youtube 上观看 react 教程，并看到它们的样式、逻辑和 HTML 在同一个文件中。我知道那实际上不是 HTML。但是有没有一种适当的方法可以将这些代码保存在单独的文件中，比如 angular？

提前致谢。

标签： javascriptreactjsangulartypescript

解决方案

这很有可能，您只需要设置您的环境来支持它。

假设您希望尽可能多地分离事物——您希望与组件关联的函数在一个文件中，与组件关联的 JSX 在另一个文件中，而 CSS 在另一个文件中。首先，你需要一个像 Webpack 这样的模块打包器，你的 React 安装可能已经集成了它。模块捆绑器允许您在项目中获取多个单独的文件，并将它们一起编译成单个（或多个，如果您愿意）文件用于生产。

要将所有 CSS 与 Webpack 捆绑到一个文件中，请参阅MiniCssExtractPlugin并使用chunks: "all"Webpack 配置中的选项。然后你可以在你的 JavaScript 中导入 CSS 文件。例如：

// componentA.jsx
import './styleA.css';
// other componentA JS code...

// componentB.jsx
import './styleB.css';
// other componentB JS code...

可用于在单独的文件中编写 componentA 和 componentB 的样式，通过 JS 导入它们，Webpack 会将其转换为单个可用的 CSS 文件以用于生产。

如果您不希望 Webpack 将所有内容合并到一个 CSS 文件中，这也很容易管理 - 这就是插件默认执行的操作。

如果需要，您可以轻松集成 CSS 预处理器，如 SCSS。

在组件的 JavaScript 中，您可以自由地从其他文件导入函数。例如：

// ComponentA.jsx
import './styleA.css';
import { makeApiCall } from './makeApiCall.js';

export const ComponentA = (props) => {
  const [callMade, setCallMade] = useState(false);
  const handler = () => makeApiCall().then(() => setCallMade(true));
  return (
    <button onClick={handler}>{callMade}</button>
  );
};

允许您根据需要从组件的 JSX 中分离出 JavaScript 逻辑和 JavaScript 逻辑。

不过，请注意。将相关函数放在单独的文件中可能会将样板文件增加到不希望的水平。例如，如果您有多个状态，并且您希望一些函数都可以访问这些多个状态并能够设置它们，那么您必须在调用它们时将所有这些值传递给函数。例如

const [stateVal1, setStateVal1] = useState(
const [stateVal2, setStateVal2] = useState(

如果您有两个函数需要这两种状态及其设置器，并且这些函数位于单独的文件中，则您需要类似

importedFn1(stateVal1, setStateVal1, stateVal2, setStateVal2);
importedFn2(stateVal1, setStateVal1, stateVal2, setStateVal2);

有点丑。我建议：

  • 抽象到与 React 无关的单独文件功能- 例如 API 调用。对于 React 代码，比如状态和状态设置器，将它们写在组件本身中可能会更容易。（所以你可以做const handler = () => makeApiCall().then(() => setCallMade(true));如上所示的事情）
  • 如果组件太长而无法被合理地理解为一个整体，请考虑在单独的文件中创建子组件，而不是试图找出一种将所有内容可管理地放入单个组件的方法。

推荐阅读