小编Mar*_*nes的帖子

我已经把一个盒子变成了旋转 10 个？并添加了悬停状态以增加尺寸。

.box {
    margin: 0 auto;
    background: blue;
    width: 100px;
    height: 100px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.box:hover {
    -moz-transform: scale(1.2) rotate(10deg);
    -webkit-transform: scale(1.2) rotate(10deg);
    -o-transform: scale(1.2) rotate(10deg);
    -ms-transform: scale(1.2) rotate(10deg);
    transform: scale(1.2) rotate(10deg);
}

<div class="box"></div>

是否可以创建一个全局历史文件来管理 react-router-dom v5 上的 createBrowserHistory()？我知道 V5 有 useHistory() 作为获取历史的一种方式。但是是否可以从任何地方检索历史记录，例如在我不使用函数组件的情况下？

在 V4 上，我可以创建一个文件 history.js：

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

它适用于 V4 https://codesandbox.io/s/react-router-v4-nfwr0

它在 V5 上不起作用 - 它更新 URL 但重定向到未找到的 https://codesandbox.io/s/react-router-v5-not-working-jlrep

如何在 React 的 useEffect 中为 Axios 调用编写 Jest 测试？

我在这里找到了如何模拟 Axios - /sf/answers/3615829941/

我还知道如何触发 useEffect 如果它是由用户交互（例如单击按钮）调用的。但是在下面的情况下，useEffect 被一个异步函数调用，该函数由 Axios 的响应触发。

例子：

成分

import React, { useState, useEffect } from "react";
import axios from "axios";

const LoadImage = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    return await axios
      .get("https://picsum.photos/200/300.jpg", {
        "Content-Type": "application/xml; charset=utf-8",
      })
      .then((response) => {
        setData(response.config.url);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => { …

我想知道是否可以使用 Zod 来确定何时需要字段，以便我可以将此布尔值传递给输入，例如<input required={/* Use Zod to determine this value */} />。我问的主要原因是出于样式目的，例如*在需要该字段时显示。

const Component = () => {
  const schema = z.object({
    name: z.string(),
    address: z.string().optional(),
  });

  type FormValues = z.infer<typeof schema>;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      name: '',
      address: undefined,
    },
    resolver: zodResolver(schema),
  });

  const onSubmit = handleSubmit((data) => console.log(data));

  return (
    <form onSubmit={onSubmit}>
      <input
        {...register('name', {
          required: /* Use Zod to determine this value */,
        })} …