javascript - 有没有办法像Angular一样为ReactJS中的逻辑、​​html和CSS等组件制作单独的文件？

Question

我对 ReactJS 完全陌生。我之前曾使用 Angular 进行办公室工作，我喜欢它的组织方式，因为逻辑文件(component.ts 或 module.ts、scss 和 HTML)文件是分开的。我已经开始在 youtube 上观看 React 教程，看到它们的样式、逻辑和 HTML 都在同一个文件中。我知道那实际上不是 HTML。但是有没有一种正确的方法可以将这些代码保存在单独的文件中，例如 Angular？

提前致谢。

Answer 1

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

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

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

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

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

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

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

您可以easily integrate CSS preprocessors如果你愿意的话，就像 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>
  );
};

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

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

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

如果您有两个函数需要这些状态及其 setter ，并且这些函数位于单独的文件中，那么您需要类似的内容

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

有点丑。我建议:

• 将与 React 无关的功能抽象到单独的文件中 - 例如 API 调用。对于 React 代码，例如状态和状态 setter ，将它们写在组件本身中可能会更容易。 (因此您可以执行诸如 const handler = () => makeApiCall().then(() => setCallMade(true)); 之类的操作，如上所示)
• 如果组件太长而无法轻松地作为一个整体进行合理理解，请考虑在单独的文件中创建子组件，而不是试图找出一种方法将所有内容以易于管理的方式放入单个组件中。