小编Mar*_*vic的帖子

我只想获得我目前正在处理的一个文件的覆盖率报告。

拥有整个应用程序文件的完整覆盖表，然后搜索我需要的文件，有点让人不知所措。

我尝试的是对一个文件运行测试并添加--coverage. 但它显示了所有文件的覆盖范围：

包.json

...
"test": "react-scripts test",
...

我的命令

npm test my-component.test --coverage

是否可以向此命令添加一个选项以仅显示my-component.tsx覆盖范围？

我现在找到了一个答案：当我添加display: none !important;. 我不知道，究竟是什么阻止了，display: none;但如果其他人有这个错误，请尝试添加!important并检查输入是否为密码字段。

原问题：

我有一个带有自定义添加的“显示密码”按钮的密码输入。现在我想删除 MS Edge 和 IE 添加的密码按钮。我已经尝试过：

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

和

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

该::ms-clear工作和消除小x，用户可以清除输入。但该::ms-reveal它不起作用。在 IE 11、基于 Chromium 的 MS Edge 和不基于 Chromium 的最新 MS Edge 中测试。

MS Edge，基于铬， IE 11

右边的眼睛是我自定义添加的眼睛，另一个是IE或Edge添加的眼睛。

这是我的输入样式：

/*
BASIC INPUT STYLING
*/

input, textarea, select {
    outline: none;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: …

从我的自定义组件中使用的父组件重新初始化formGroup时遇到问题.我得到的错误是:

没有FormControl实例附加到具有名称的表单控件元素:'selectedCompany'

HTML:

<form [formGroup]="addForm">
     ...
     <my-custom-component formControlName="selectedCompany"></my-custom-component>
     ...
</form

<my-custom-component>是根据创建自定义formControl组件的有效方式创建的:https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#implementing-controlvalueaccessor

零件

这是初始化formGroup变量的代码addForm:

let formTemp: any = {
    selectedCompany: new FormControl(null, [Validators.required]),
}

this.addForm = this._formBuilder.group(formTemp);

第一次addForm初始化一切都很好.但是当我重新打开表单所在的模态,并且执行相同的组件代码时,会发生上述错误.

我刚刚集成到redux-toolkit. 我的目标是将查询结果存储getPosts在 a 中slice，以便我可以在整个网站上使用它或更改它。

我的createApi是这样的：

  export const postsApi = createApi({
  reducerPath: "posts",
  baseQuery: getGeneralFetchBaseQuery(),
  endpoints: (builder) => ({
    getPosts: builder.query<PostsType, number>({
      query: (id) => `api/posts/${id}`,
    }),
  }),
});

export const { useGetPosts } = postsApi;

我想将结果存储getPosts在这个切片中

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
});

export default postsSlice.reducer;

我的商店是这样的

export const mainStore = configureStore({
  reducer: {
    postsReducer,
    [postsApi.reducerPath]: postsApi.reducer,
  },
})

如何才能实现这一目标？

我已经使用 jest 版本、26.0.0react-testing-library 和 node 版本编写了单元测试14.2.0。下面是我的 React 功能组件，它有一个按钮，单击后会发出 ajax 调用来下载报告文件。

const ReportListTable = () => {
    const { downloadReports } = useReports();

    const onClickDownload = () => {
        let fileName = `Report.zip`;
        downloadReports()
            .then((response) => response.arrayBuffer())
            .then((data) => {
                const blob = new Blob([data], { type: "octet/stream", endings: "native" });
                const url = window.URL.createObjectURL(blob);
                const anchor = document.createElement("a");
                anchor.setAttribute("href", url);
                anchor.setAttribute("download", fileName);
                anchor.click();
                window.URL.revokeObjectURL(url);
            })
            .catch((error?: Error | Response) => {
                if (error instanceof Error) { …

我在这里找到了一个解决方案:Webpack和Typescript图像导入

但我得到的错误是:

[ts]
Types of property 'src' are incompatible.
  Type 'typeof import("*.png")' is not assignable to type 'string | undefined'.
    Type 'typeof import("*.png")' is not assignable to type 'string'.

我想我需要以某种方式投射导入,但无法弄清楚如何.我在React做这个.我看到该src属性被定义为string | undefined,这就是错误弹出的原因.

这是代码:

import * as Logo from 'assets/images/logo.png';

HTML:

<img src={Logo} alt="" />

并根据上述解决方案定义:

declare module "*.png" {
  const value: string;
  export default value;
}

Tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "lib": ["es5", "es6", "dom"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": …

我想imageList根据显示宽度（又称媒体查询）减少列数，但它无法正常工作。例如：

<ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={18}>
  {images.map((image) => (
    <ImageListItem key={image.id}>
      <img
        src={image.urls.regular}
        srcSet={image.urls.regular}
        alt={image.alt_description}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

如果我这样做，我只会得到 1 列，如果我尝试cols={3}，我会得到 3 列。有小费吗？

我正在使用 TypeScript 开发一个基于 React hook 的功能应用程序，并且我正在使用 ant design 的模态。我正在通过表格的模式提交表单。因此，将多次调用模式来填充表的不同行。

问题是，当模态弹出第二次、第三次或横向时，它总是携带之前的值。

为了避免这种情况，我在模态中设置了EnableViewState="false"，它不起作用。我设置 destroyOnClose={true}。它不起作用。在模态文档中，写的是当destroyOnClose不起作用时我们需要使用。但在哪里定义它呢？因为，当我以模态形式设置为时 <Form onSubmit={props.inputSubmit} preserve={false}，我收到一条错误消息Type '{ children: Element[]; onSubmit: any; preserve: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Form>......?

你用什么来让模态每次重新加载时，它都会重新加载为空？我不想在输入的表单值字段中分配状态。是否还有其他选项，例如 destroyOnClose={true} ？

这是我的模式，

<Form onSubmit={props.inputSubmit}>
  <Row>
    <Col span={10}>
      <Form.Item>
        <Text strong={true}>Article name: </Text>
      </Form.Item>
    </Col>
    <Col span={12}>
      <Form.Item>
        <Input
          style={{ backgroundColor: '#e6f9ff' }}
          name="articleName"
          onChange={props.handleArticleModalInput}
        />
      </Form.Item>
    </Col>
  </Row>
</Form>

这是模态被调用的地方，

return (
  <>
    <ArticleTableModal
      destroyOnClose={true}
      isVisible={modalVisibilty}
      inputSubmit={inputSubmit}
      handleCancel={handleCancel}
      filledData={fetchedData}
      articleNumber={articleNumber} …

应用程序.js：

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

显示.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

我在使用这些钩子时遇到了无效的钩子调用。

这是我的依赖项：

import React from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function History() {
  let history = useHistory(); …

ReactComponent例如，我将 SVG 导入到我的组件中，并将它们作为组件导入

import { ReactComponent as D1 } from '../../../assets/images/characteristics/D1.svg';

当我运行 Jest/Enzyme 来测试组件时，出现以下错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

看来我需要嘲笑这个吗？我怎么能这么做呢？