小编die*_*edu的帖子

Reactjs Dev工具中的钩子编号对应什么?

我有一个 React.js 应用程序,我想对其进行性能问题分析。

我在 Firefox 中使用 React 开发工具分析器。

我分析了特定的交互并在开发工具中获取火焰图和排名时间图。

然后这条消息出现在开发工具中:

在此输入图像描述

开发工具的这一部分不是交互式的,我找不到有关钩子如何编号的任何信息。

我如何解释这些数字?它们对应什么?我在哪里可以找到有关它们所指的钩子的信息?

reactjs react-devtools

167
推荐指数
1
解决办法
4万
查看次数

连接蓝牙模块后数据丢失

客观的

我试图在连接后从蓝牙设备返回数据,因为要使用读写功能,需要一些数据。示例数据name, overflowServiceUUIDs, solicitedServiceUUIDs, mtu, rssi...和许多其他数据。因为如果我想读或写,我需要一些属性。我正在使用图书馆react-native-ble-plx

怎么了?

设备连接后,我丢失了一些值。

重要的

type DeviceState = {
  connected: boolean;
  services: Service[];
  device: Device | null;
  characteristics: Record<string, Characteristic[]>;
};

const INITIAL_DEVICE_STATE = {
  connected: false,
  services: [],
  device: null,
  characteristics: {},
};
Run Code Online (Sandbox Code Playgroud)
const [adapterState, setAdapterState] = useState(false);
const [bleDevices, setBleDevices] = useState<Device[]>([]);
const [isScanning, setIsScanning] = useState(false);
const [connectedDevice, setConnectedDevice] = useState<DeviceState>(
    INITIAL_DEVICE_STATE,
);

# The state isScaning is used to be if we are scanning devices.
# The connectedDevice …
Run Code Online (Sandbox Code Playgroud)

bluetooth bluetooth-lowenergy typescript react-native react-native-ble-plx

11
推荐指数
1
解决办法
610
查看次数

返回 input 或 textArea 的元素的 React/Typescript forwardRef 类型

我正在尝试使用 react 和 typescript 为我们的应用程序创建一个通用的文本输入组件。我希望它能够成为基于给定道具的输入元素或 textarea 元素。所以它看起来有点像这样:

import {TextArea, Input} from 'ourComponentLibrary'

export const Component = forwardRef((props, ref) => {
  const Element = props.type === 'textArea' ? TextArea : Input

  return (
    <Element ref={ref} />
  )
})
Run Code Online (Sandbox Code Playgroud)

这段代码工作正常。然而,当试图合并类型时,它变得有点冒险。ref 类型应该是HTMLInputElementHTMLTextAreaElement基于传递的typeprop。在我的脑海中,它看起来像这样:

interface Props {
  ...
}

export const Component = forwardRef<
  HTMLInputElement | HTMLTextAreaElement,
  Props
>((props, ref) => {
  ...
});
Run Code Online (Sandbox Code Playgroud)

但是我知道这不完全是我需要的。因此,错误: Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap …

typescript reactjs react-ref react-forwardref

9
推荐指数
2
解决办法
3406
查看次数

减少 React 表重新渲染

我有一个包含两列的表格,每一列都是可编辑的。该表还包括添加新条目的能力。我遇到的问题是,每当编辑单行时,都会重新渲染每一行。对于较大的表,这会在编辑单行时导致明显的按键延迟。关于如何防止这种情况的任何想法?

我无法在“小”示例中复制性能问题,但https://codesandbox.io/s/zen-williams-r8pii?file=/src/App.js是基本功能。我试过在几个地方删除 React.memo 无济于事(我是这方面的新手)

谢谢你的帮助!

optimization rendering reactjs

9
推荐指数
1
解决办法
1446
查看次数

React-Select 破坏了 CoreUi 功能

我使用的是@coreui/reactReact-select问题是,返回Select的元素scoped slotscore-ui的功能就像搜索排序

但是,如果在返回带有文本Ex 的a<label>或 a时它工作正常:<p><label>{item.status}</label>

为什么 Select 组件会破坏功能?

任何解决方法/努力都受到高度赞赏

笔记

我尝试过类似的解决方法<p hidden >{item.status}</p>,然后渲染Select组件,但它不起作用

import React from "react";
import Select from "react-select";
import { CDataTable } from "@coreui/react";

...

  <CDataTable
    bordered
    clickableRows
    fields={fields}
    hover
    items={[...employeeData]}
    itemsPerPage={10}
    itemsPerPageSelect
    loading={tableLoader}
    onRowClick={(e) => rowSelectHandler(e)}
    pagination
    size="sm"
    sorter={{ resetable: true }}
    striped
    tableFilter={{
      placeholder: "Filter",
      label: "Search:",
    }}
    scopedSlots={{
      status: (item, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-select core-ui

9
推荐指数
1
解决办法
667
查看次数

响应本机 ImageBackground 方向更改

即使我可以更改屏幕方向以更新状态并重新渲染,ImageBackground 组件仍然不会更新其宽度。

我有以下代码:

<View
  onLayout={event => this.mylayoutchange(event)}
  style={{ flex: 1, backgroundColor: 'green' }}
>
  <ImageBackground
    style={{ flex: 1, width: this.state.width, height: this.state.height }}
    imageStyle={{ resizeMode: 'repeat' }}
    source={require('../assets/images/my_background.jpg')}
  >
    <View>
      <Text>.... Other code here....</Text>
    </View>
  </ImageBackground>
</View>;
Run Code Online (Sandbox Code Playgroud)

当用户改变设备的方向时, mylayoutchange() 函数被调用。它正确更新状态。渲染函数将更新。宽度和高度已正确更改,如 中所示console.log()。但是,无论出于何种原因,<ImageBackground>都不会更新其正确的宽度和高度。

当屏幕旋转时,背景图像不再填满屏幕的整个尺寸,而是看到绿色背景颜色。

我究竟做错了什么?

我的环境:

"react": "16.13.1",
"react-native": "0.63.2",
Run Code Online (Sandbox Code Playgroud)

screen-orientation react-native imagebackground

8
推荐指数
1
解决办法
774
查看次数

How to switch cameras in PWA app built with reactjs?

I have a code which records or uploads the videos. The app is built using create-react-app and is a PWA. I have used facingMode constraint but it still doesnt switch cameras on mobile phone (Samung fold 2) even in motorola phone it doesnt have the same affect. Here is the code:

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

import config from '../../config';


const MediaRecorderCapture = props => {
  const [mediaRecorder, …
Run Code Online (Sandbox Code Playgroud)

html5-video samsung-mobile reactjs web-mediarecorder progressive-web-apps

7
推荐指数
1
解决办法
231
查看次数

如何使用 Typescript 在 mongoose 中正确输入对象 ID 数组

我有一个帖子模型:

const PostSchema = new Schema<IPost>(
  {
    // ...
    likes: [{ type: Schema.Types.ObjectId, ref: "User" }],
    // ...
  }
)

export default model<IPost>("Post", PostSchema)
Run Code Online (Sandbox Code Playgroud)
export interface IPost {
  // ...
  likes: ObjectId[]
  // ...
}

export interface IPostDocument extends Document, IPost {}
Run Code Online (Sandbox Code Playgroud)

我正在尝试切换用户,例如:

export const toggleLike: TController = async (req, res, next) => {
  const user = req.user as IUserDocument;
  const userId = user._id;
  const postId = req.params.postId;
  try {
    const disliked = await PostModel.findOneAndUpdate(
      { _id: postId, likes: userId …
Run Code Online (Sandbox Code Playgroud)

mongoose mongodb typescript

7
推荐指数
2
解决办法
2934
查看次数

如何在dom中的React-pdf文档中渲染svg徽标?

我有一个项目,我正在使用 React-pdf 生成文档。我想向此文档添加 SVG 徽标。根据React-pdf文档,他们有一个名为Svg的元素,它是一个定义新坐标系和视口的容器,它被用作SVG文档的最外层元素。据我了解,我应该以某种方式将普通的 svg 转换为 React-pdf 使用的元素类型,以便使其工作?(如果是这样,我怎样才能做到这一点?我可以使用某种外部库吗?)。我的代码如下(现在它给了我一个错误,因为我无法使用 React-pdf 中的图像来渲染 svg。如果我将 Image 元素与格式为 .jpeg 或 .png 的图像的 src 一起使用,它就可以工作。

import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  Image,
  Svg,
  PDFViewer,
} from "@react-pdf/renderer";

...
  return (
    <div>
      <PDFViewer style={{ width: "98vw", height: "98vh" }}>
        <Document title="TITLE" author="AUTHOR">
          <Page size="A4" style={styles.page}>
            <View style={styles.section}>
              <Svg>
                <Image src={logoUrl} style={styles.logo} />
              </Svg>
              <Text>My PDF</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  );
...
Run Code Online (Sandbox Code Playgroud)

svg reactjs react-pdf

7
推荐指数
2
解决办法
8961
查看次数

在 react-image-annotate 中手动添加用于分类的文本

我打算使用react-image-annotate通过绘制多边形来注释图像。但react-image-annotate默认情况下只允许从预定义列表中选择一个分类。

我想要类似这个库react-image-annotation 的东西,您可以在其中绘制一个边界框,并显示一个您可以在其中输入自定义文本的字段。

文档说可以使用 构建自定义表单RegionEditLabel,但没有明确的文档。

reactjs

6
推荐指数
1
解决办法
169
查看次数