标签: react-tsx

使用此代码时，出现错误Property 'type' does not exist on type 'EventTarget'。对于checked,value和name。

按照代码，我可以看到FormEvent从SyntheticEvent它继承而来的target: EventTarget. EventTarget 没有我想要的属性。如果我改为将其标记event为any( event: any)，则代码可以完美运行。我怎样才能解决这个问题？我尝试使用普通的 Html 输入，然后通过将事件设置为React.ChangeEvent<HTMLInputElement>.

handleChange(event: React.FormEvent<React.Component<ReactBootstrap.FormControlProps, {}>>) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}
...
<FormGroup controlId="Email">
    <Col componentClass={ControlLabel} sm={2}>
        Email
    </Col>
    <Col sm={10}>
        <FormControl name="email" type="email" value={this.state.email} onChange={(event) => …

我如何设计材质 UI 对话框或模态的透明深色覆盖层？我正在使用 material-ui/React/Typescript。

我希望它不是透明的黑色，而是透明的白色。我更喜欢JSS解决方案，但欢迎使用内联样式。

这是我的代码：

<Button
  disabled={filter === 'Active'}
  size='md'
  color='primary'
  name='Active' // complete = false
  onClick={this.handleFilterClick}
>
  Active
</Button>

在我的函数处理程序上，我收到事件错误：

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // continue here
     const { name } = e.target;

它说：

Property 'name' does not exist on type 'EventTarget'.

我也试过：

(e:  React.MouseEvent<HTMLInputElement, MouseEvent> &  React.MouseEvent<HTMLButtonElement, MouseEvent>) 

按钮的事件类型是什么？在 JavaScript 中，这有效，它可以接受名称，但我不知道为什么不打字稿？

我的应用程序有一个带有 ssr 的简单路由，下面是我的代码

索引.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
serviceWorker.unregister();

应用程序.tsx

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import Home from "./components/home/Home";
import Tournament from "./components/tournament/Tournament";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact strict component={Home} />
          <Route
            path="/tournament/:tourId/:tourName"
            exact
            component={Tournament}
          /> …

我们正在使用OutlinedInputMaterial UI，但未呈现文本标签。如何解决这个问题？

import { Grid, OutlinedInput } from '@material-ui/core';

import { Grid, OutlinedInput } from '@material-ui/core';

而不是预期的“不可见标签”文本，而是呈现一个空白区域（左上角）：

我正在使用PanGestureHandler和PinchGestureHandler来允许在屏幕上平移和放大/缩小大图像。但是，一旦引入缩放变换，平移的行为就会有所不同。

我通过此实施实现了三个目标：

1. 我试图在首次加载视图时缩小图像以适应特定高度。这样用户就可以看到尽可能多的图像。如果仅对图像应用缩放变换，则 的平移值0不会将图像置于左上角（由于缩放原点居中）。
2. 我试图做到这一点，以便当有人使用捏合手势进行缩放时，平移值也会进行调整，以使缩放原点看起来好像位于用户发起手势的位置（React Native 目前仅支持尺度变换的中心原点）。为了实现这一点，我假设我需要在用户缩放时调整平移值（如果比例不是1）。
3. 缩放后平移时，我希望平移通过调整与缩放比例相关的平移值来跟踪用户的手指（而不是移动得更快/更慢）。

这是我到目前为止所拥有的：

import React, { useRef, useCallback } from 'react';
import { StyleSheet, Animated, View, LayoutChangeEvent } from 'react-native';
import {
    PanGestureHandler,
    PinchGestureHandler,
    PinchGestureHandlerStateChangeEvent,
    State,
    PanGestureHandlerStateChangeEvent,
} from 'react-native-gesture-handler';

const IMAGE_DIMENSIONS = {
    width: 2350,
    height: 1767,
} as const;

export default function App() {
    const scale = useRef(new Animated.Value(1)).current;
    const translateX = useRef(new Animated.Value(0)).current;
    const translateY = useRef(new Animated.Value(0)).current;
    const setInitialPanZoom = useCallback((event: LayoutChangeEvent) …

我有一个安装了 prettier 和 eslint 的项目。问题是当我保存文件时，eslint 会自动更改文件的格式，并且似乎有些规则与 prettier 冲突。解决办法是什么？

这是更漂亮的格式：

保存后，文件更改为：

这也是 eslintrc 文件

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "rules": {
        "react/prop-types": "off"
      }
    }
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "ignorePatterns": ["coverage/", "node_modules/", "src/serviceWorker.ts"]
}

我正在使用反应流创建节点图。每个节点的上方和下方都会出现一些小点来创建新的边。这些边缘的选择和放置区域的像素精度非常高，以至于用户很难链接项目。有什么办法可以增加连接区域吗？我希望用户能够将边缘拖动到节点上的任何位置，它将两者链接在一起。

import ReactFlow, { removeElements, addEdge, isNode, Background, Elements, BackgroundVariant, FlowElement, Node, Edge, Connection, OnLoadParams } from 'react-flow-renderer';

const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);

const initialElements: Elements = [
    { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
    { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 …

我是反应新手，在传递一个简单的布尔值作为材质 UI 库中 MenuItem 的支柱时遇到一些问题。我不认为解决方案太复杂。有人可以让我知道如何解决此错误吗？

该错误指向的行如下所示：

<MenuItem value={true}>Yes</MenuItem>

错误看起来像这样：

  The last overload gave the following error.
TS2769: No overload matches this call.
    Type 'true' is not assignable to type 'string | number | readonly string[] | undefined'.
    402 |                                 onChange={handlePO_status}
    403 |                             >
  > 404 |                                 <MenuItem let value={true}>Yes</MenuItem>
        |                                               ^^^^^
    405 |                                 <MenuItem value={false}>No</MenuItem>
    406 |                             </Select>
    407 |                         </FormControl>

任何帮助将不胜感激。谢谢你！

我的应用程序在react.ts中包含.env文件来存储带有机密数据的变量。但是使用的时候process.env.REACT_APP_CLIENT_ID控制台出现错误。

未捕获的引用错误：进程未定义

怎么解决？请帮帮我。

.env 文件

REACT_APP_CLIENT_ID = ed75ba30-1810

authConfig.tsx 文件

export const msalConfig: Configuration = {
auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: "https://login.microsoftonline.com,
},