标签: reactjs

我一直在尝试按照web3-react的文档集成WalletConnect。

我用于连接器的配置如下：

import { WalletConnectConnector } from '@web3-react/walletconnect-connector';

export const walletconnect = new WalletConnectConnector({
  rpc: { 1: RPC_URLS[1], 4: RPC_URLS[4] },
  infuraId: INFURA_TOKEN,
  bridge: BRIDGE_URL,
  qrcode: true,
  pollingInterval: 15000,
});

另外，软件包的版本如下：

"@web3-react/core": "^6.0.9",
"@web3-react/walletconnect-connector": "^6.2.0",

当我使用以下代码中解释的activate函数时：useWeb3React()

const { connector, activate, active, account } = useWeb3React();

activate(walletconnect, undefined, true)
    .catch((error) => {
        if (error instanceof UnsupportedChainIdError) {
            activate(walletconnect)
        } else {
            console.log('Pending Error Occured')
        }
    })

它能够生成二维码，我也能够成功扫描手机上的 MetaMask 应用程序，并在移动应用程序上显示已成功连接。

不过，在 Web 应用程序的控制台日志上，它显示一条警告：

Warning: …

我有一个项目，是一个员工监控项目，它有几个组件，这些组件中有一组按钮在一起。

我有一组按钮，我在另一个组件中调用这些按钮，但是当我编写代码时，我遇到了这个错误。

Type '(event: React.MouseEvent<Document, MouseEvent>) => void' is not assignable to type '(event: 
   MouseEvent | TouchEvent) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'MouseEvent | TouchEvent' is not assignable to type 'MouseEvent<Document, MouseEvent>'.
      Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Document, 
      MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persi
           st 

我该如何修复它？

这个文件有按钮的设计并赋予它们自己的风格

当我激活这个文件时，它给了我上面的错误。

const options = ['Member', 'Admin'];

export default function SplitButton() {
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLDivElement>(null);
    const [selectedIndex, setSelectedIndex] = …

第一次发帖提问:)

我有一个React应用程序：

// index.js

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root'),
);

我有 24 个jest测试套件，到目前为止，基本上是这样的：

act(() => {
  render(
    <Router>
      <SomeComponentIWantToTest />
    </Router>
  );
});

我想到将测试包装在 中更合适StrictMode，以更接近应用程序的实际渲染方式：

act(() => {
  render(
    <React.StrictMode>
      <Router>
        <SomeComponentIWantToTest />
      </Router>
    </React.StrictMode>
  );
});

尝试之后，我注意到以下几点：

1. 一件好事是，它在我没有将一些测试代码包装在act. 我能够修复这些地方。欢呼！
2. 我的测试速度显着减慢。我猜这是因为我的 React 组件由于 Strict Mode 而渲染了两次。

另外，快速浏览一下文档，这似乎StrictMode只是开发的事情。那么，将测试（理论上与生产中将发生的情况有关）包装起来有意义吗React.StrictMode？

我正在像这样设置导航容器的主题

import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from "@react-navigation/native";

export default function Navigation() {
  const colorScheme = useColorScheme();
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}

我有一个堆栈导航器，在堆栈导航器内我有一个抽屉式导航器，如下所示：

// Root Navigator
export default function RootNavigator() {
  return (
    <Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
      <Stack.Screen
        name="Root"
        component={DrawerNavigator}
        options={{
          headerShown: false,
        }}
      />
      {/* Other Screens */}
    </Stack.Navigator>
  );
}

// Drawer Navigator
export default function DrawerNavigator(props) {
  return (
    <Drawer.Navigator
      initialRouteName="UserSettings"
      drawerContent={(props) => <CustomDrawerContent {...props} …

我正在尝试使用 Snackbar 的材料 ui获得多个警告，到目前为止他们没有成功，我看到了一些 Vue 的例子，但没有反应，有人可以帮助我吗？按照我下面的代码操作

https://codesandbox.io/embed/withered-sunset-ru3p3?fontsize=14&hidenavigation=1&theme=dark

我正在尝试使用 React 和 TypeScript 在控制台中mousemove记录事件。window经过一些研究并查看类似的问题后，我认为我可以用作MouseEvent传递给侦听器的事件的类型。

useEffect(() => {
  const onMouseMove = (e: MouseEvent) => {
    e.preventDefault();
    console.log(e);
  };

  window.addEventListener("mousemove", onMouseMove);

  return () => {
    window.removeEventListener("mousemove", onMouseMove);
  };
}, []);

但运行时提示我以下错误：

const onMouseMove: (e: MouseEvent) => void
No overload matches this call.
  Overload 1 of 2, '(type: "mousemove", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(e: MouseEvent) => void' …

我正在做一些反应，并遇到了一个我无法解决自己的挑战。我在这里和其他地方搜索过，发现了标题相似的主题，但与我遇到的问题没有任何关系，所以我们开始：

所以我有一个数组，它将被映射到 React 组件中，通常如下所示：

export default ParentComponent = () => {

//bunch of stuff here and there is an array called arr

return (<>
 
    {arr.map((item, id) => {<ChildComponent props={item} key={id}>})}

</>)

}

但问题是，父元素中有一个状态，它存储当前选定的子组件之一的 id（我通过设置上下文并在子组件内设置此状态来做到这一点），然后问题是我必须引用当前选定的 ChildComponent 内部的节点。我可以毫无问题地转发引用，但我也想仅在当前选定的 ChildComponent 上分配引用，我想这样做：

export default ParentComponent = () => {

//bunch of stuff here and there is an array called arr and there's a state which holds the id of a  selected ChildComponent called selectedObjectId

const selectedRef = createRef();

return (<>
    <someContextProvider>
    {arr.map((item, id) => …

亚马逊上有一个特定的 url，它在 s3 上存储一些图像，相关的亚马逊域已在 next.config.js 中的域上配置，但不会在前面加载。如果我输入任何外部网址、unsplah 或其他网址，它会正常加载。

有问题的网址是：idinheiro-admin-images.s3.sa-east-1.amazonaws.com

控制台上出现的错误是在带有 404 (Bad Request) 的 url 中

-- 错误控制台 --

GET http://localhost:3000/_next/image?url=https%3A%2F%2Fidinheiro-admin-images.s3.sa-east-1.amazonaws.com%2Fcartao-de-credito%2Fol%25C3%25A9%2520consignado_1619718123784.png&w=64&q=75 400 (Bad Request)

-- next.config.js --

(module.exports = {
    images: {
      domains: [
        'images.unsplash.com',
        'idinheiro-admin-images.s3.sa-east-1.amazonaws.com'
      ]
    }
  })

-- 使用组件 --

<Image
   src="https://idinheiro-admin-images.s3.sa-east-1.amazonaws.com/cartao-de-credito/ol%C3%A9%20consignado_1619718123784.png"
   alt={partnerCard.alt}
   width={100}
   height={63}
/>

我正在使用 Yup 根据验证模式验证嵌套数据对象。我想检索第一个验证错误的路径。我用validate()尝试过，是的。它有默认为 true 的选项abortEarly。因此在这种情况下应该返回第一个错误。

但是，我总是收到最后一个错误。我不确定我错过了什么。

下面是我迄今为止尝试过的代码。

  const validationSchema = Yup.object().shape({
    basicDetails: Yup.object().shape({
      firstName: Yup.string().required("Required first name"),
      lastName: Yup.string().required("Required last name"),
      gender: Yup.string().required("Required gender"),
      phoneNumber: Yup.string().required("Required phone number"),
      emailId: Yup.string().required("Email id is required")
    }),
    educationDetails: Yup.object().shape({
      graduationDegree: Yup.string().required("Required graduation degree"),
      postGraduationDegree: Yup.string().required(
        "Required post graduation degree"
      ),
      registrationNumber: Yup.string().required("Required registration number"),
      workExperience: Yup.string().required("Required work experience")
    })
  });

  const dataObject = {
    basicDetails: {
      firstName: "Nik",
      lastName: "Test",
      gender: "male",
      phoneNumber: "9876543210",
      emailId: ""
    },
    educationDetails: { …

我正在使用patch-package来修补我的依赖项之一的 package.json 文件。我修改了 package.json 并运行npx patch-package [dependency_name]，但它没有捕获对 package.json 所做的更改。但是，对其他文件（例如index.js）所做的更改会被捕获。如何修补 package.json？我正在尝试修改模块和 jsnext:main 属性。