标签: reactjs

我正在开发一个 Laravel Reactjs 项目，当我运行命令时，npm run dev编译停留在 95% 并给出以下错误。我检查了整个项目，没有使用区分大小写的名称进行文件调用，所有图像都使用小写字母进行调用。

Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
/media/public/images/user-4.jpg
/media/public/images/user-4.jpg

反应：17.0.1

网络包：5.21.2

节点：14.15.2

我正在进行一个带有故事书的项目，我希望我的故事能够更改背景或放置背景，因为我只需要不同颜色的背景，但我不能像文档中所述那样放置背景：

https://storybook.js.org/docs/react/essentials/backgrounds

export default {
  title: 'Button',
  parameters: {
    backgrounds: {
      default: 'twitter',
      values: [
        { name: 'twitter', value: '#00aced' },
        { name: 'facebook', value: '#3b5998' },
      ],
    },
  },
};

我的代码是这样的：

export default {
  title: "Atoms/Example",
  component,
  parameters: {
    backgrounds: {
      default: "black",
      values: [
        { name: "black", value: "#000000" },
        { name: "white", value: "#ffffff" }
      ]
    }
  },
  argTypes: {
    is: {
      control: {
        type: "select",
        options: [25, 33, 50, 75, 100]
      }
    }
  }
}

但我的代码根本不起作用，从文档中看到一切都是正确的。 …

在环境中使用RN 0.63.4并尝试实现可触摸卡Android。

代码非常简单：

<TouchableOpacity onPress={() => handlePress()}>
    <ArticleContainer>
        ....
    </ArticleContainer>
</TouchableOpacity>

这是 CSSArticleContainer

const ArticleContainer = styled.View`
    height: 170px;
    width: 320px;
    border-radius: 11px;
    padding: 13px;
    margin: 20px 15px 10px 20px;
    elevation: 5;
    background-color: white;
`;

未触摸时 UI 看起来很好，甚至海拔看起来也不错：

但当试图触摸它时，它变得如此丑陋，看看奇怪的阴影和边框：

在 StackOverflow 中只找到了几个答案，在官方 GitHub 中找到了一个答案，但这两个答案都不适合我。

有办法解决吗？

在 Electron-React-Typescript 应用程序中，我收到此错误：

Automatic publicPath is not supported in this browser

package.json 中的 devDependency ：

"css-minimizer-webpack-plugin": "^1.2.0",
"electron": "^11.2.3",
"typescript": "^4.1.5",
"webpack": "^5.21.2",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"

按照此处找到的指示进行操作：此浏览器不支持 Webpack5 自动 publicPath

webpack.rules.config.js ：

// Images Loader
test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
use: [
  {
    loader: 'file-loader',
    options: {
      //publicPath: '',
      publicPath: inDev ? 'images' : './main_window/images',
      outputPath: inDev ? 'images' : './main_window/images',
    },
  },

我尝试将 publicPath 设置为空并填充 outputPath 的值。还删除了 mini-css-extract-plugin。但这些都不起作用。

有什么建议么？

我有一个应用程序，用户需要按住按钮来录制音频。但是，当用户按住移动设备上的按钮时，浏览器会尝试选择附近的文本（因为用户按住手指）。这是有道理的，但我想阻止这种情况发生。

当我添加user-select: none到文本时，它不再被选择，而是选择更高级别的文本。有没有一种方法可以完全捕获按钮级别的“用户选择事件”并防止其冒泡到附近的文本？我最终在我的 DOM 树上追逐了 user-select: none 事件，这感觉不正确。

这是我的按钮 HTML：

<Button onMouseDown={onMouseDown} onMouseUp={onFinish} onMouseLeave={onFinish} className={classes.button} onTouchStart={onMouseDown} onTouchEnd={onFinish}>
            <div className="flex items-center relative">
                <svg height={radius * 2} width={radius * 2}>
                    <circle stroke="rgba(0,0,0,0.1)" fill="transparent" strokeWidth={stroke} r={normalizedRadius} cx={radius} cy={radius} transform={`rotate(-90 ${radius} ${radius})`} />
                    <circle
                        stroke="black"
                        fill="transparent"
                        strokeWidth={stroke}
                        strokeDasharray={circumference + ' ' + circumference}
                        style={{ strokeDashoffset }}
                        r={normalizedRadius}
                        cx={radius}
                        cy={radius}
                        transform={`rotate(-90 ${radius} ${radius})`}
                    />
                </svg>
                <Mic className="absolute" style={{
                    left: '50%',
                    top: '50%',
                    transform: 'translate(-50%, -50%)',
                    fontSize: '80px'
                }}/>
            </div>
        </Button>
        <div className="flex flex-col …

我有一个由两部分组成的 Web 应用程序：使用 Django + Django Rest Framework (DRF) 实现的后端，以及作为 React App 项目的前端。对于身份验证和授权，我使用 Keycloak。

首先进行身份验证，前端应用程序将用户重定向到Keycloak登录页面，当Keycloak收到正确的用户名和密码组合后，将用户重定向回前端应用程序并为前端应用程序提供访问权限密钥和刷新密钥对。

现在，当用户想要调用后端的任何 API 时，它就拥有所需的访问密钥。我决定也让前端应用程序负责刷新访问令牌；但我期待任何更好的解决方案。

由于我的应用程序需要使用授权，因此Keycloak中的“访问类型”应设置为“机密”；因此，当我的前端应用程序想要进行身份验证时，它应该提供“客户端密钥”。

当我处于开发阶段时，这没有问题，因为我可以轻松更改代码中的客户端密钥。但是，当我想要构建用于生产的前端​​应用程序时，我会在生产环境（与开发实例分开）中对 Keycloak 实例的客户端密钥进行硬编码，然后构建应用程序。换句话说，对于密钥的任何更改，都需要进行新的构建，这确实是一个令人头疼的问题。

1. 我是否使用了正确的身份验证步骤？
2. 有没有办法让前端应用程序在不提供密钥的情况下进行身份验证？
3. 如果上述问题的答案是“否”（我认为是这样），那么前端应用程序有没有办法在构建后使用客户端密钥作为配置值？

根据本文档，我在根目录中创建了一个 jsconfig.json 文件，以便能够在我的 React 应用程序（使用 create-react-app 设置）中使用绝对路径导入组件。不幸的是这不起作用。我尝试安装react-app-rewired 和react-app-rewire-alias 来尝试相同的操作，但没有成功。任何帮助，将不胜感激。

以下是我的 jsconfig.json 文件：

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

以及引发错误的文件（src/Components/Pages/Login/LoginForm）

import React from 'react'
import './Login.css'

import ToggleButton from '@material-ui/lab/ToggleButton'
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'

import IconButton from '@material-ui/core/IconButton'
import Button from '@material-ui/core/Button'
import Input from '@material-ui/core/Input'
import OutlinedInput from '@material-ui/core/OutlinedInput'
import InputLabel from '@material-ui/core/InputLabel'
import InputAdornment from '@material-ui/core/InputAdornment'
import FormControl from '@material-ui/core/FormControl'
import TextField from '@material-ui/core/TextField'

import {MdVisibility, MdVisibilityOff} from 'react-icons/md'
import { FormHelperText } from '@material-ui/core'

import …

我有呈现选项卡内容的组件。它只是检测孩子是否是唯一的孩子，如果不是，则将它们包装在 div 中。它还可以（可选）通过克隆子项来应用具有样式的道具。我几个月前编写了这个组件，然后更新了一些库和 TypeScript。今天我查看它的代码，发现错误。

组件

import * as React from 'react';

export interface PageTabContentShape {
  title: string;
  pageTabName?: string;
  withContainer?: boolean;
  containerStyle?: React.CSSProperties;
  labelTestid?: string;
  children: React.ReactElement;
}

export const PageTabContent: React.ComponentType<PageTabContentShape> = (props) => {
  let child = React.Children.only(props.children);
  if (props.withContainer) {
    return (
      <div style={props.containerStyle}>
        {child}
      </div>
    );
  }
  // pass styles to only child when there is no wrapper
  if (props.containerStyle && React.isValidElement<{ containerStyle }>(child)) {
    child = React.cloneElement(child, { containerStyle: props.containerStyle });
  }
  if (null != …

我为我的反应项目自定义了一个反应选择下拉组件。当我尝试使用 React.HTMLAttributes<HTMLSelectElement | 扩展界面时 HTMLInputElement>. 它显示“没有与此调用匹配的重载”。我尝试扩展不同的属性来获取默认值，如 id、标签、名称、占位符等。如何获取 props 中的默认属性？有人遇到过类似的问题吗？

示例代码：

import * as React from "react";

import ReactSelect from 'react-select';

export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement | HTMLInputElement> {
    options: Array<any>;
    isMulti: boolean;
    isDisabled: boolean;

};

const Select: React.FC<SelectProps> = (props: SelectProps) => {

    return (<div>
        <label htmlFor={props.id}>{props.label}</label>
        <div>
            <ReactSelect
                {...props}
            />
        </div>
    </div>)
}
export default Select;

使用上面的代码后，我无法获取 props.id 或 props.name 等。

我有带有引导程序包的反应项目

// npm install bootstrap@next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'

然后我有工具提示元素

<i className="bi bi-align-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"></i>

文档说，我们必须执行此 JavaScript 才能启用引导工具提示

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

所以我将代码放在componentDidMount方法中，在我渲染工具提示的类中

但我收到错误

'bootstrap' 未定义 no-undef

或者当我将导入标签调整为

import { bootstrap } from 'bootstrap/dist/js/bootstrap.bundle.min';

我收到另一个错误

Cannot read property 'Tooltip' of undefined

所以我很困惑如何启用这个工具提示？