标签: reactjs

我正在尝试使用 Jest 运行测试，目前我在 React 应用程序中使用 jsx 和 tsx （从 js 更改为 ts），但是当我运行测试时，除了 tsx 中具有可选阻塞的测试之外，所有 jsx 测试都成功。Unexpected token我的输入总是出现如下错误

...
<Input 
    value={parent?.child}
...

这是我的笑话配置

{
    "verbose": true,
    "roots": [
      "<rootDir>/app"
    ],
    "setupFiles": [
      "./config/webpack/jest/config.js"
    ],
    "moduleNameMapper": {
      "^components(.*)": "<rootDir>/app/javascript/components$1",
      "^utils(.*)": "<rootDir>/app/javascript/utils$1",
      "^types(.*)": "<rootDir>/app/javascript/types$1",
      "\\.(css|pcss|scss)$": "<rootDir>/spec/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/spec/__mocks__/fileMock.js"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ],
    "testRegex": "(/__tests__/.*|\\.(test))\\.(ts|tsx|js|jsx)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx"
    ],
    "transform": {
      "\\.[jt]sx?$": "babel-jest"
    }
}

我如何使用可选链和玩笑可能会出现什么问题？

我一直在尝试在 electro-forge 应用程序中使用 Webpack 来加载资源（特别是图像），但没有成功。

主要问题是，当我使用带有“资产/资源”类型的 png 示例规则时，应用程序将无法运行并引发错误。

我的规则如下：

module.exports = [
  // Add support for native node modules
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    }
  },
  {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource'
  }
];

抛出的错误如下：

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has …

我正在将我的 React 应用程序部署到 firebase 托管。当我创建 firebase init 并选择所有选项时，我收到此错误。

C:\Users\user\git\Apps\screem>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\user\git\Apps\screem

? Are you ready to proceed? Yes
? Which Firebase CLI …

我有两个问题 ->

第一个是我想在用户单击react.js中的“+”按钮时动态添加用户输入字段。如果用户点击次数越多，表单中就会添加更多的字段。如何在react.js中做到这一点？

第二个当用户更改其值时，我想将每个输入字段的相应值存储到我的组件状态变量中。现在我如何添加它们的值，我使用什么数据结构数组或对象或其他东西？如何 ？

我是 React 和 Typescript 的新手，我正在尝试将暗模式添加到我的项目中，我创建了 globalStyle 组件、Themes 组件并使用 Themeprovider。

我的 globalStyle 组件遇到问题：属性“body”不存在类型“DefaultTheme”

我的 globalStyles.tsx 代码如下：

import { createGlobalStyle} from "styled-components"
export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }`

我的主题.tsx：

export const lightTheme = {
    body: '#FFF',
    text: '#363537',
    background: '#363537',
}
export const darkTheme = {
    body: '#363537',
    text: '#FAFAFA',
    background: '#999',
}

以及我在 App.tsx 上的 Themeprovider 代码： …

我需要将反应传单地图定位到用户的当前位置并获取该地图的边界。我尝试应用以下代码，但遇到了错误：

类型错误：无法读取未定义的属性“定位”（匿名函数）

请帮我！

import React, { useState, useEffect, useRef } from 'react';
import restaurantsInfo from "./RestaurantsList.json";
import "./App.css";
import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from "react-leaflet";
import { Icon, latLng } from "leaflet";
import Restaurants from "./Restaurants.js";
import LocationMarker from "./LocationMarker.js";
import L from 'leaflet';

const myLocation = [49.1951, 16.6068];
const defaultZoom = 13;

export default function App() {

  const mapRef = useRef();
  useEffect(() => {
    const { current = {} } = mapRef;
    const { leafletElement: map …

前端 = React，后端 = FastApi。如何简单地从前端发送图像，并让后端将其保存到本地磁盘？我尝试了不同的方法：在对象中、在 base64 字符串中等。但我无法设法在 FastApi 中反序列化图像。它看起来像一个编码的字符串，我尝试将其写入文件或对其进行解码，但没有成功。

const [selectedFile, setSelectedFile] = useState(null);
const changeHandler = (event) => {setSelectedFile(event.target.files[0]);   };
const handleSubmit = event => {

const formData2 = new FormData();
formData2.append(
"file",
selectedFile,
selectedFile.name
);

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    body: formData2 // Also tried selectedFile
};
  fetch('http://0.0.0.0:8000/task/upload_image/'+user_id, requestOptions)
    .then(response => response.json())
}

return (  <div
            <form onSubmit={handleSubmit}>
              <fieldset>
                  <label htmlFor="image">upload picture</label><br/>
                  <input name="image" type="file" onChange={changeHandler} accept=".jpeg, .png, .jpg"/>

              </fieldset>
              <br/>
              <Button …

我正在尝试将图像保存到 indexeddb，然后在 React 应用程序中获取并显示它们。我的方法是将图像转换为 blob 并将 blob url 保存到 indexeddb，然后在需要显示时获取 blob url 并将图像 url 设置为 .src。

我是如何创建 blob 的

fetch(imgurl, {
                mode: 'no-cors',
                method: "get",
                headers: {
                     "Content-Type": "application/json"
                } 
             }) 
            .then(response => response.blob())
            .then(async images => {
               
                    var blob_url = URL.createObjectURL(images)
                  
                    var blobA = blob_url.replace("blob:","") 
                    var blobB = blobA.replace('"','')

这是 bloburl blob:http://localhost:3000/d7a55f39-b496-476b-8c3c-857874bd107c

然后，我删除 blob: 并将此网址保存在 indexeddb 中，以便在需要时获取 http://localhost:3000/d7a55f39-b496-476b-8c3c-857874bd107c

这是我需要使用 blob 图像的地方

import React from "react";
import { Row, Col, Container, Image } from 'react-bootstrap';

   
function Item({ item }) { …

出于搜索引擎优化的目的，我需要将英语设置为默认语言 -> mynextapp.com/当用户进入网站时，他/她可以选择英语或法语，如果选择英语，则 url 将更改为mynextapp.com/en，如果选择法语 -> mynextapp.com/fr

目前我正在使用 Next - i18n 中的内置选项：

i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
},

但这允许我仅将英语作为默认路径= mynextapp.com/

语言切换器：

    <Link
        href="/"
        locale={router.locale === 'en' ? 'fr' : 'en'}
    >
        <a>Switch</a>
    </Link>

有没有办法在不同的网址下处理相同的语言？这样，当您在语言切换器中单击“en”时，url 路径应该是 myapp.com/en。

我正在使用 React Router v5。

我遇到了需要支持以下用例的情况。

我有通过 访问的 React 组件/project/1234。/project/1234/hello但是，我还需要通过两者访问同一个 React 组件，/project/1234/goodbye.同样，所有这三个路由都需要导航到同一个 React 组件。

以下代码不起作用，因为据我所知，如果我导航到/project/1234/goodbye，react-router 会将其解释为我将“再见”作为参数的值传递，因此如果我使用react-router 的钩子:hello以编程方式询问参数useParams()本身，我就会得到错误的参数值。

<Route
   path={'project/:context/:hello?/:goodbye?'}
   render={matchProps => <Project {...matchProps}/>}
/>

换句话说，如果导航到/project/1234/goodbye然后执行以下操作：

const params = useParams()
console.log(params.hello)

params.hello将返回“再见”

同样，这不起作用，因为使用数组/project/1234/goodbye总是首先匹配/project/1234，因此我不会使用useParams()react-router提供的钩子获得任何传递的参数。

<Route
   path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
   render={matchProps => <Project {...matchProps}/>}
/>

我可以这样：

<Route
   path={'project/:context'}
   render={matchProps => <Project {...matchProps}/>}
/>

但是，当我使用react-router的useParams()钩子时，我将无法询问参数:goodbye或:hello

有人知道如何使用 React Router 来实现这一点吗？或者我只需要声明单独的路线？