小编Mar*_*mes的帖子

我有用户可以选择的下拉选项列表。

下拉列表中的 optinos 是用标签制作的：<a href>：

<a onClick={() => handleSelect(filter)} role="button">
   {filter.name}
</a>

问题是我必须添加tabIndex="0" or -1，以修复来自 Eslint 的错误。

但是当我添加时tabIndex=0，我的按钮不再起作用。

有没有其他方法可以修复此错误？

这是下拉组件的外观：

<ul name="filters" className="dropdown">
    {filterOptions.map((filter) => (
      <li
        key={filter.id}
        defaultChecked={filter.name}
        name={filter.name}
        className={`option option-${filter.selected ? 'selected' : 'unselected'}`}
      >
        <span className={`option-${filter.selected ? 'checked-box' : 'unchecked-box'} `} />

        <a onClick={() => handleSelect(filter)} role="button">
          {filter.name}
        </a>
      </li>
    ))}
  </ul>

使用部署在 firebase 上的 next.js 应用程序。

我已经部署了该应用程序并使用了一段时间。

1. 我创建了一个动态路线页面
2. 再次部署应用程序
3. 我可以通过路由器访问动态页面，但是一旦刷新页面，我就会收到 404 页面未找到

我尝试过但不起作用的解决方案：

• 使用dynamicLink true 进行重写
• 将目的地重写为动态路由和正则表达式/源

"rewrites": [
      {
        "source": "/job/**",
        "destination": "/job/[jobId]/index.html"
      }

• cleanUrls true
• TrailingSlash：true 加上重写配置，目标为动态页面
• 还有更多吗

我找到了很多解决这个问题的方法，但没有一个不适合我。

任何想法？

firebase.json 文件：

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "out/index.html"
      }
    ]
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"]
    }
  ]
}

• 我有渐变颜色的文本和边框底部的颜色，但没有按预期工作：

• Safari（桌面）

• iPhone (Safari)

截图：

1. 这是它在 Chrome 网页上的外观

2. 这是它在 Safari（桌面）上的外观

3. 这是它在 iPhone 12 Safari 上的外观

使用样式组件编写的 CSS 代码：

export const Tabs = styled.ul`
    display: flex;
    width: 100%;
    margin-top: 2em;
`;

export const Tab = styled.li`
    display: flex;
    ${fontStyles[fontSizes.eighteen]};
    border-bottom: 3px solid transparent;
    background-image: linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
        ${colors.gradientGreen};
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
    cursor: pointer;
    outline: none;
`;

export const Span = styled.span`
    font-weight: 800;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image-source: …

我正在尝试将文件中的 SVG 图像导入 Next.js 组件。

在资产文件夹中，我有 google.svg（图标）：

<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
    <g fill="none" fillRule="evenodd">
      <path
        d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
        fill="#4285F4"
      />
      <path
        d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
        fill="#34A853"
      />
      <path
        d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
        fill="#FBBC05"
      />
      <path
        d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
        fill="#EA4335" …

我正在尝试从我的组件创建一个库/包。

技术堆栈是：React、Typescript...以及一堆其他依赖项。

我正在使用 Rollup，当我尝试构建包时，出现以下错误：

[！] 错误：“DisplayHint”未由 ../node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js 导出，由 ../src/utils/answerTypeConversions.ts https 导入： //rollupjs.org/guide/en/#error-name-is-not-exported-by-module

卷起：

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import reactSvg from 'rollup-plugin-react-svg';
import typescript from 'rollup-plugin-typescript2';
import svg from 'rollup-plugin-svg';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import urlResolve from 'rollup-plugin-url-resolve';

export default [
  {
    input: './src/index.ts',
    output: [
      {
        file: './dist/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      { …

在next.config.js- 我添加了使用 SVG 图像所需的配置。

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

module.exports = withCSS(
  withSass(
    {
      webpack: (config) => config,
      distDir: '../_next'
    },
    withImages({
      webpack(config, options) {
        return config;
      }
    })
  )
);

这是我的 SVG 文件，位于下一个文件夹下/client/assets/googleIcon.svg。

也许问题出在 SVG 文件中。我没有使用 SVG 的经验，这个 SVG 正确吗？

<svg version="1.1" width="100%" height="100%" viewBox="0 0 25 25">
  <g fill="none" fillRule="evenodd">
    <path
      d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
      fill="#4285F4"
    />
    <path
      d="M12.5 21c2.295 0 4.22-.76 …

我的其中一个页面有一个非常大的包大小。

如何改进 Next.js 中页面的首次加载？

请看一下截图：

我正在使用 Next.js 和 Firebase 开发一个 Web 应用程序。我已在我的应用程序中成功实现了 Google 登录，但遇到了导致登录过程无法按预期完成的问题。

当我尝试登录时，会按预期显示一个弹出窗口。但是，在控制台中，我看到以下错误：

Cross-Origin-Opener-Policy policy would block the window.closed call.

由于此错误，登录过程无法完成，用户也无法正确登录。

一些进一步的上下文：我正在本地主机上的开发环境中测试此功能。该问题在 Chrome 上存在，但在 Firefox 上不存在。

此错误是否是由于 Cross-Origin-Opener-Policy 的配置错误造成的？如果是这样，我如何在 Next.js 应用程序中正确配置此政策以使用 Firebase 进行 Google 登录？

我有3种按钮，分别代表3种不同的语言，

用户可以选择显示哪种语言的文本：

1. “德国德语”

2. “法国法语”

3. “英语”

// This is state of component:
 state = {
    translationOptions: {
      german: false,
      french: false,
      english: true
    }
  };

// This is function which change the language

  <button
    className={`doc-translation-btn ${german ? 'active-background-color' : ''}`}
    onClick={() => this.changeDocumentLanguage('german')}
  >
     DE
  </button>

  <button
    className={`doc-translation-btn ${french ? 'active-background-color' : ''}`}
    onClick={() => this.changeDocumentLanguage('french')}
    >
      FR
   </button>

  <button
     className={`doc-translation-btn ${english ? 'active-background-color' : '' }`}
     onClick={() => this.changeDocumentLanguage('english')}>
       EN
   </button>

如何优化此代码？

在我的反应组件中，我有一个 5 秒后出现的元素。

我想做一个测试，检查 5 秒后元素是否出现jest fake timers，但无法使其工作......

我在这里做错了什么？

其中一个示例不起作用：

it('check step 2 labels text, status "Submitted"', async () => {
    render(<ProgressIndicator appStatus="submitted" />);

    jest.advanceTimersByTime(5005);
    await waitFor(() => {
      expect(
        screen.getByText('Beep. Boop. Still doing our thing here.'),
      ).toBeInTheDocument();
    });

    await waitFor(() => {
      expect(screen.getByText('Verifying identity...')).toBeInTheDocument();
    });
  });

第二个例子：

it('check step 2 labels text, status "Submitted"', async () => {
    render(<ProgressIndicator appStatus="submitted" />);

    act(() => {
      jest.advanceTimersByTime(5005);
    });

    expect(
      screen.getByText('Beep. Boop. Still doing our thing here.'),
    ).toBeInTheDocument();
    expect(screen.getByText('Verifying identity...')).toBeInTheDocument(); …

我在反应语义 ui 中有一组 3 个单选按钮。

这工作正常。问题出在 UI 错误中，当我单击此单选按钮之一时，未选中按钮。

ui错误截图：

有人知道为什么不检查按钮吗？

单选按钮代码：

  <Form>
    <Form.Field>
      <Radio
        label="New Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === false}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="Transferred Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === true}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="New Claims and Trasferred Claims"
        name="isTransferred"
        value={'all'}
        checked={isTransferred === 'all'}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
  </Form>

更新：

从浏览器生成的 HTML：

<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
    <div class="field">
        <label>Assignments:</label>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
            <label>New …