小编Eri*_*ell的帖子

我对 React 和 React-router-dom 还很陌生。问题是，我试图在我的应用程序中为不同的路线获取不同的布局。但相反，不同路线的所有 css 文件都只是导入到一个巨大的冲突块中。

应用程序看起来像这样：

<Router>
  < >
    <Navigation />
    <UpButton />
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/research" component={Research} />
      <Route path="/publications" component={Publications} />
      <Route path="/student" component={Student} />
      <Route path="/about" component={About} />
    </Switch>
  </>
</Router>

我渲染的每个组件如下所示：

import React from 'react';
import './home.scss';

// Utility
import Utility from 'components/utility/Utility';

class Home extends React.Component {
  render() {
    return (
      < >
        <Utility />
      </>
    );
  }
}

export default Home;

有没有办法只导入具有特定路由的特定CSS文件？就像 home.css 代表“/”路线，about.css 代表“/about”路线？

这可能是我的一个简单的误解，但我现在确实找不到任何解决方案。

最近我开始使用 CSS 模块来使用 NextJS。为了消除重复，我想在每个样式表中自动导入带有混合、变量等的部分。

使用 GatsbyJS，我发现如何在项目的每个样式表中自动导入一些特定的 SASS 部分。设置看起来像这样：

{
  resolve: `gatsby-plugin-sass`,
  options: {
  data: '@import "_reset.scss", "_typography.scss", "_mixins.scss", "_extends.scss", "_themes.scss";',
  includePaths: [
    'src/styles/partials',
    ],
  },
},

现在我的 next.settings.js 看起来像这样：

const path = require("path");
const withSass = require("@zeit/next-sass");

const partials = [
  "_reset.scss",
  "_variables.scss",
  "_themes.scss",
  "_typography.scss",
  "_mixins.scss",
  "_extends.scss",
];

module.exports = withSass({

  cssModules: true,

  webpack: config => {
    config.resolve.alias["components"] = path.join(__dirname, "components");
    return config;
  },

});

如果可能的话，如何在每个样式表中自动包含部分内容？

问题解决，感谢@eric-tan的回复：

所有部分都导入到一个“_utilty.scss”部分中，该部分包含在 sassLoaderOptions 中： -> data：导入部分本身；-> includePaths：导入的部分所在的位置。

const path = require("path");
const withSass = …

我正在通过创建简单的应用程序来学习 Svelte。

逻辑是使用类编写的。这个想法是，所有需要的数据都来自类实例属性。实例的实例化不应超过一次。我正在使用商店来提供这个实例的组件。

问题是我无法使用这种方法获得反应性。我尝试了可读和可写的商店，但没有任何帮助。仍然可以使用 OOP 获得反应性，我该怎么办？重新分配和创建新实例将是昂贵的。

编辑

我无法在 REPL 中编写示例，因为类太大了。

解析器.js

export default class Parser {
  constructor() {
    this._history = [];
  }

  parse(string) {
    this._history.push(string)
  }

  get history() {
    return this._history;
  }
}

在这里，我将实例传递给商店。

解析器商店.js

import writable from "svelte/store";
import Parser from "Parser.js"

export const parserStore = writable(new Parser());

在这个组件中，我获取了实例并被动地使用了一个方法。

Component_1.svelte *

import { parserStore } from "parserStore.js";

$: result = parserStore.parse(binded_input_value);

我想得到的是使用类方法更新的最新时间历史属性：

Component_2.svelte

import { parserStore } from "parserStore.js";

$: history = parserStore.history;

{#each history as ... }

我知道，这不是最好的例子，但我想要的是可通过商店获得的反应式类实例。实际上这些值是最新的，但它不会导致组件的重新渲染。当组件被安装 …

我正在尝试使用 Azure 服务和 Github Actions 来部署静态 Web 应用程序。

问题是，我需要使用 NodeJS 运行脚本。我正在使用 ESM 模块，这些模块在 Node v14 中运行良好。问题是，在构建任务期间，Azure（或github）使用v12.8（我猜是LTS），其中不支持ESM模块。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:

    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')

    runs-on: ubuntu-latest

    name: Build and Deploy Job

    steps:

      - uses: actions/checkout@v2
        with:
          submodules: true

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
          repo_token: ${{ …

我正在使用 React 构建一个应用程序，其中两个组件应该能够更改彼此的状态：

组件 A -> 组件 B

组件 B -> 组件 A

组件 A 是一组按钮，组件 B 是一个输入元素。

我设法让它只以一种方式工作，A -> B 或只是 B -> A，但不能让它同时工作。它可以部分使用 useEffect 钩子，但有错误，我认为这确实是愚蠢的想法。

我读过很多关于 React 不能以这种方式工作的文章，但是有什么迂回方式可以使其工作吗？我的应用程序确实需要这种 2 路数据绑定。

谢谢你的帮助！

按钮的状态位于自定义上下文挂钩 (useStateContext) 中的数字变量中，作为数组。

import { useStateContext } from "components/StateProvider/Context"; 
import { useState, useEffect } from "react";

import { baseConvert } from "utility/baseConvert";

const NumberInput = () => {

  const [ { digits, baseIn, baseOut }, dispatch ] = useStateContext();

  const convertedValue = baseConvert({
    digits,
    baseIn, …