小编Leo*_*ssi的帖子

我正在使用Chrome进行调试,可能它已更新或发生了一些事情,但现在我看不到我的应用程序的错误消息.

它只显示有多少错误,如下所示:

我想有些设置必须改变,但不知道在哪里以及如何.

如何更改以获取错误消息？

当将 React-hook-form 与 Typescript 一起使用时，有一个组件会发送一些 props，register作为其中之一。

问题在于在接口中声明时的类型：

export interface MyProps {
  title: string;
  ...
  register: (string | undefined) => void;
}

这里的正确声明方式是什么register？

还尝试过：

import { RegisterOptions } from 'react-hook-form';
    export interface MyProps {
      title: string;
      ...
      register: RegisterOptions;
    }

为了更改我正在使用的类中的某些样式querySelector()：

el.querySelector('.fa fa-car').style.display = "none";

这对于一个元素来说效果很好，但如果有更多元素包含此类，并且我想将所有元素的显示更改为无，则此命令仅删除它的第一次出现，而下一个元素保持不变。

我尝试这样做querySelectorAll()：

 el.querySelectorAll('.fa fa-car').style.display = "none";

但这会返回一条错误消息：

html2canvas：类型错误：无法设置未定义的属性“显示”

关于如何获取包含特定类的所有元素并对它们执行操作有什么想法吗？

当我创建一个实体（在本例中为公司）时，我使用Formik和Yup来检查字段是否正确以及所有字段是否都已引入（全部都是必需的）。

当我创建一个实体时，它工作正常：只有在引入所有字段并且满足规则（目前仅针对电子邮件的一条规则）时，它才允许您创建它。

这是用于创建具有 2 个字段名称和电子邮件的新公司的代码：

    import React from 'react';
    import { Redirect } from 'react-router-dom';
    import { Formik, Form, Field } from 'formik';
    import { Input, Button, Label, Grid } from 'semantic-ui-react';
    import { connect } from 'react-redux';
    import * as Yup from 'yup';
    import { Creators } from '../../../actions';
    import Layout from '../../Layout/Layout';
    
    class CreateCompanyForm extends React.PureComponent {
      constructor(props) {
        super(props);
    
        this.state = {
          name: '',
          contactMail: '',
          redirectCreate: false,
          redirectEdit: false,
          edit: false,
        }; …

有以下代码片段：

import React from "react";

import Editor from "@monaco-editor/react";

function App() {
  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
    />
  );
}

export default App;

和沙箱

是否可以将其设为只读？我找到了一些示例，但它们不适用于这种类型的编辑器，是否可以将上述代码的只读设置为 true 或其他方法？

拥有这种形式的二维数组:

arr = [
        ["12325-a", 1, 1, 1],
        ["43858-b", 3, 4, 1],
        ["84329-a", 6, 5, 2],
        ["18767-b", 0, 9, 0],
        ["65888-b", 5, 4, 4],
];

在每个子数组上,第一个元素是一个字符串.

我想将具有相同结尾的子阵列组合在一起.在这种情况下,它将是两组: -a和-b.

应根据idex将数值计算为总和.

所以结果如下:

arr = [
        ["-a", 7, 6, 3],
        ["-b", 8, 17, 5],
];

我的解决方案(不起作用):

let arr = [
  ["12325-a", 1, 1, 1],
  ["43858-b", 3, 4, 1],
  ["84329-a", 6, 5, 2],
  ["18767-b", 0, 9, 0],
  ["65888-b", 5, 4, 4],
];

result = arr.reduce(function(acc, curr) {
  if (acc[curr[0].substr(curr[0].length - 2)]) …

我将它用作按钮内部，但我不知道如何更改其大小，以使其更小。

import { faSort } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

... 

<button
  className="my-button"
  onClick={() => this.doSomething()}
  type="button">
  <FontAwesomeIcon icon={faSort} />
</button>

我尝试在开发人员工具中添加width, height,size具有不同的值，但图标没有改变其大小。是因为它是SVG吗？

有办法让它变小吗？

有一个使用react-hook-form的基本组件：

const { 处理提交、重置、控制 } = useForm({ 解析器： yupResolver(schema) });

...

  <MyComponent
    title='title'
    open={isOpened}
    control={control}
  />

这个组件有 3 个 props，title - 一个字符串，open - 一个函数，control - 不知道它是什么，所有这些都是强制性的。

因此，在为其编写测试时，我陷入了困境：

import { render } from '@testing-library/react';

import '@testing-library/jest-dom';
import MyComponent from './my-component';

describe('MyComponent', () => {
  const title = 'title';
  it('should render successfully', () => {
    const { baseElement, getByText } = render(
      <TaskModal
        title={title}
        open={jest.fn()}
        control={} // what should be written here?
      />
    );
    expect(baseElement).toBeTruthy();
    expect(getByText(title)).toBeTruthy();
  });

control这个测试怎么能被嘲笑呢？

有一个表单包含两个输入，一个字符串和一个数字都是必需的。

这是架构：

const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required()
});

之后就是react-hook-form了：

  const { handleSubmit, reset, control, register, watch } = useForm({
    defaultValues: emptyObject,
    resolver: yupResolver(schema)
  });

正如您所看到的，其中defaultValues有emptyObject。

这里是：

const emptyObject = {
  name: '',
  age: 0
}

该name部分工作正常，如果该文本框中没有写入任何输入，我无法提交数据，但对于年龄来说，它不需要任何值。我知道它会检查值并且发现它是0并且它认为存在输入。

但如何改变它才能使其发挥作用呢？尝试过null但仍然不起作用。

我不得不提的是，它是 React with Typescript，所以还有一个接口，当age设置为 时会抛出错误null。

  MyData: {
    name: string;
    age: number;
  }

例如，有两个如下所示的期望条件：

expect(firstItem).toHaveClass(firstStyle);
expect(firstItem).not.toHaveClass(secondStyle);

有没有办法让它们排成一行？就像是：

expect(firstItem).toHaveClass(firstStyle).and.not.toHaveClass(secondStyle);