标签: tsx

我的应用程序使用 .ts、.js 和 .jsx 文件编译并运行。现在我尝试将 .jsx 文件更改为 .tsx 并且它中断了。

如何修复此编译错误：

ts-loader: Using typescript@1.6.2 and C:\users\ruser\Desktop\Downloads\divinote\site\tsconfig.json                                                                                                                                                    67% 226/234 build modulesModuleParseError: Module parse failed: C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js?cacheDirectory!C:\users\ruser\Desktop\Downloads\divinote\site\src\app\views\header\DiviAppBar.tsx 
Line 15: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }
|     DiviAppBar.prototype.render = function () {
|         return (<AppBar />);
|     };
|     return DiviAppBar;
    at DependenciesBlock.<anonymous> (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack\lib\NormalModule.js:113:20)
    at DependenciesBlock.onModuleBuild (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
    at context.callback (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14)
    at Object.loader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js:431:5)
    at WEBPACK_CORE_LOADER_EXECUTION (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:71)
    at runSyncOrAsync (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:93)
    at …

我在英特尔的页面上找到了

https://ark.intel.com/products/97123/Intel-Core-i5-7500-Processor-6M-Cache-up-to-3_80-GHz

该处理器支持TSX-NI技术但我在谷歌上找不到任何关于它的信息.它与英特尔TSX相同.如果它是不同的,那么我如何使用它.

对不起,我的英语不好!:)

我需要组件的引用.刚刚从jsx转移到tsx,无法找到解决此问题的方法.

其他解决方法是使用查询选择器,但这并不是我认为做出反应的好方法.

这是构造函数

constructor(props) {
    super(props);
    this.state = {
        data: initialData,
        showNewListForm: false,
        whichButtonClicked: undefined,
        background: props.background || "#23719f"
    };

    this.divContainerRef = React.createRef();
    console.log("kanban reference : " + React.createRef().current);

    this.handleDragStart = this.handleDragStart.bind(this);
    this.handleDragEnd = this.handleDragEnd.bind(this);
    this.handleLaneDragEnd = this.handleLaneDragEnd.bind(this);
    this.handleLaneDragStart = this.handleLaneDragStart.bind(this);
    this.onCardAdd = this.onCardAdd.bind(this);
    this.onCardClick = this.onCardClick.bind(this);
    this.addNewListHandler = this.addNewListHandler.bind(this);
    this.containerRefResolver = this.containerRefResolver.bind(this);
    this.isBoardPresent = this.isBoardPresent.bind(this);
}

我有一个组件的代码：

反馈.tsx

import React, { useState } from 'react';
import './Feedback.css';

import FeedbackButton from './FeedbackButton';

function Feedback() {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  return (
    <div className="Feedback">
      <FeedbackButton onClick={() => setIsOpen(!isOpen)} />
    </div>
  );
}

export default Feedback;

该FeedbackButton组件如下所示：

反馈按钮.tsx

import React from 'react';
import feedbackicon from './feedback.svg';
import './Feedback.css';

function FeedbackButton() {
  return (
    <button className="Feedback-button" type="button">
      <img src={feedbackicon} className="Feedback-button-icon" alt="feedback" />
    </button>
  );
}

export default FeedbackButton;

在线<FeedbackButton onClick={() => setIsOpen(!isOpen)} />我收到错误Type '{ …

我是一个初学者，第一次学习ts。预先感谢您分享您的知识。我正在列一个待办事项清单。我过去常常做出反应来完成它。但现在我正在使用react和typescript一起来完成代码。我收到一个错误。我不知道问题是什么。请帮帮我。

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

点击此处查看完整代码

我认为问题出在这个文件上。

// 比赛.tsx

import React, { createContext, useReducer, useContext, Dispatch } from 'react';
import reducer from "./reducer";
import { Action } from './actions'

export interface ITodo {
  id: string;
  text: string;
};

export interface State {
  toDos: ITodo[];
  completed: ITodo[];
}

interface ContextValue {
  state: State;
  dispatch: Dispatch<Action>;
} …

有什么办法可以运行mocha编写的测试typescript - tsx？

当我跑步

mocha --require ts-node/register sometest.tsx

要么

mocha --require ts-node/register --compiler ts:ts-node/register --compiler tsx:ts-node/register sometest.tsx

错误显示：

TSError: ? Unable to compile TypeScript
Cannot use JSX unless the '--jsx' flag is provided. (17004)

顺便说一下，是否可以调试tsx用WebStorm 编写的测试？

假设我有这个输入组件：

import { defineComponent } from "@vue/runtime-core"

export default defineComponent({
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => (
            <div>
                <input type="text" {...attrs} />
            </div>
        )
    }
})

现在，我像这样使用这个组件并提供type="password"属性：

import { defineComponent } from "@vue/runtime-core"
import Input from "./components/input"

export default defineComponent({
    setup(props, { attrs }) {
        return () => <Input type="password"></Input>
    }
})

但是打字稿抱怨：

Property 'type' does not exist on type 'IntrinsicAttribute'> & VNodeProps & AllowedComponentProps & ComponentCustomProps>'

我是反应新手，在传递一个简单的布尔值作为材质 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>

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

我继承了 JSX 的一些遗留项目。我正在将 JSX 转换为 TSX。

目前正在 TSX 中导入 JSX 和 JS 文件。我收到一个错误Cannot find module 'config/abc_module' or its corresponding type declarations.。

我知道缺少类型，因为它是 JS 文件。我添加了 JSDoc 类型，但似乎没有任何帮助。在 JSX 文件中添加类型以在 TSX 中使用它们的最佳方法是什么？

我在JS中有相当多的文件，有些由于特定原因甚至无法转换。我进行了很多搜索并阅读了很多文章，但似乎找不到任何具体的前进方向。任何帮助，将不胜感激。提前致谢。

如何将 google play store 和 app store url 参数值传递到输入字段？

例如，https://play.google.com/store/apps/details?id={appID}&hl=en&referrer=ABC123

我想ABC123在用户安装应用程序后将传递给引用者输入字段。

我已经尝试过，Linking但Linking只有在安装了用户应用程序时才有效。

我想做的是，

1. 当用户未安装该应用程序时。
2. 去https://play.google.com/store/apps/details?id={appID}&hl=en&referrer=ABC123
3. 应用程序已安装
4. 打开应用程序时，自动将引荐来源网址字段添加到ABC123