小编Ask*_*ing的帖子

我有一个组件：

export type IDAta = string | number | null;

interface IDAta {
  data?: string | number | null;
  verify: boolean;
}

const App: React.FC<IDAta> = ({
  data = '',
  verify = true,
}) => {

  if ((data || data === 0) {
    return (
      <div>
        {verify && isText(data) ? (
          <Child text={data} />
        ) : (
          data
        )}
      </div>
    );
  }

};

export default App;

isText 和 Child 组件期望参数仅为字符串，但这样做verify && isText(data)后我会在打字稿中遇到错误，例如Type 'number' is not assignable to …

我有一个 React JS 应用程序，我在其中使用 axios 发送 GET 请求。在浏览器的Response Headers部分中，当我发送请求时，我得到了Content-Disposition: attachment;filename="image123.pdf"，但是当我尝试在 React 中获取它时，我没有得到任何具有该名称的字段。因此，当我尝试访问 时response.headers['content-disposition']，我什么也得不到。

是否可以使用 React JS 使用 axios 读取此标头键？

在我的 React js 应用程序中，使用 React 测试库测试应用程序，我遇到了下一种情况。我尝试从中查找数据const d = utils.getAllByTestId('el')[0]，现在我想测试内部是否d存在带有role:的元素const i = d.getByRole('img')，但我得到了d.getByRole is not a function。从文档中我得到该getByRole方法只能附加在正在使用render()方法的元素上，但我没有找到可以解决我的问题的东西。
问题：如何在反应测试库中实现我上面描述的目标？

我想通过以下方式从查询参数创建一个 url：

 router.push(
      {
        pathname: '/cars',
        query: colors + type + price,

      },
      undefined,
      {
        shallow: true,
      },
  );

const colors = ['red', 'blue', 'yellow']; //the arrays could contain many others values
const type = ['offroad', 'sport'];
const price = 'hight'  //this is a string

我想实现，当我单击触发的按钮时router.push，下一个： /cars?color=red,yellow,blue&type=offroad,sport&price=hight

我在我的应用程序中使用 AgGrid 表。这是演示。根据文档，我想停止柱的移动。为此我使用了：

suppressMovable: true

我在这里使用的上面的代码：

suppressMovable: true

suppressMovable:true，它可以工作，并且athlete和age列不可能像其他列一样移动，但此代码也禁用主列的移动：Athlete。Athlete因此，当我尝试切换和列的位置时Medals，我不能，但我不想要这个，我想将这两个主列设置为可移动。
问题：如何禁用 和 内的列的移动Athlete，Column但保留这两个主要列的移动功能？

在我想测试的组件中，我使用useLocation钩子。在我的组件中：

function Test() {
  const history = useHistory();
  const location = useLocation();
  const query = new URLSearchParams(location.search).get('value');

  return <div > Welcome < /div>
}

为了测试该组件，我编写了这个测试：

jest.mock('react-router-dom', () => ({
    useLocation: jest.fn().mockReturnValue({
        pathname: '',
        search: 'value',
        hash: '',
        state: null,
        key: '5nvxpbdafa',
    }),
}));

jest.mock('react-router-dom', () => ({
    useHistory: () => jest.fn().mockReturnValue({
        push: jest.fn(),
    }),
}));

describe(' page test', () => {
    test('should render', () => {
        render(<Test />);
        const title = screen.getByText(/welcome/i);

        expect(title).toBeInTheDocument();
    });
})

尝试这个我明白了TypeError: (0 …

我有一个构建表单的应用程序，我想为表单设置默认值。我用过：const [form] = Form.useForm();。我的表单标签如下所示：

<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>

我尝试设置默认值：

form.setFieldsValue({
  name: object.name,
});

在这里我收到下一个警告： Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?

我在这个主题上看到了很多答案，但他们通过添加form={form}. 在我的情况下它不起作用。可能是什么问题？

我在我的应用程序中使用antd库。根据文档，我可以通过更改变量来自定义主题，例如：

modifyVars: {
  "primary-color": "#EB564F",
   "link-color": "#0DD078",
   "success-color": "#0DD078",
   "border-radius-base": "40px",
}

我在我的反应应用程序中做了类似的事情，添加了文件webpack.config.js和其中的下一个代码：

// webpack.config.js
const antdRegex = /antd.+\.less$/;

module.exports = {
rules: [
    {
        test: antdRegex,
        loader: [
            "style-loader",
            "css-loader",
            {
                loader: "less-loader",
                options: {
                    lessOptions: {
                        modifyVars: {
                            "primary-color": "#EB564F",
                            "link-color": "#0DD078",
                            "success-color": "#0DD078",
                            "border-radius-base": "40px",
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        ],
    }]
}

但颜色不会改变。为什么以及如何解决？

我使用 ReactJs、jest 和 React 测试库。我有这个代码：

const App = ({data}) => {
  const [state, setState] = useState(); // after useEffect runs state should be false
  console.log('test state', state)
  useEffect(() => {
     setState(!data) 
  }, [])
  return <p>'data is' {data},<p/>
}

<App data={12}  />

useEffect 运行后状态应该是false。现在我想使用 jest 和 React 测试库来测试组件。

describe('App', () => {

  beforeEach(() => {
    const setValue = jest.fn(x => {});
    React.useState = jest.fn()
      .mockImplementationOnce(x => [x, setValue])
  })
  test('It should render the correct value', async() => {
      const …

我想在我的反应组件中使用顺风主题。为此目的我做了这个：

import theme from "tailwindcss/defaultTheme";


console.log(theme)

另外，我创建了一个tailwind.config.js文件，在其中添加了主题的新更改。这样做时我遇到了一个问题，因为即使我覆盖了它们，
其中的值也是默认的顺风值。如何从 Tailwind 主题获取更新的值？console.log(theme)