我的 stenciljs 渲染函数目前是用打字稿这样编写的：

render() {
  if( this._isInline ) {
    return (
      <span>
        <slot />
      </span>
    );
  } else {
    return (
      <div>
        <slot />
      </div>
    );
  }
}

但我更喜欢如果我能写成这样：

render() {
  const tag = this._isInline ? 'span' : 'div';
  return (
    <{tag}>
      <slot />
    </{tag}>
  );
}

但这给了我一堆错误消息。

有没有办法编写 jsx 代码，以便我有条件打开和关闭标记？

这可能是一个简单的问题，但无法在网上找到答案。在ts文件中我可以定义这样的函数：

const lastGeneric = <T>(arr: Array<T>): T => { 
   return arr[arr.length - 1];
}

但是，如果我尝试在文件中执行此操作tsx，我会收到一堆语法错误，因为它假设我正在尝试JSX使用名为的组件创建T

是否有其他方法可以在tsx文件中定义上述函数？我究竟做错了什么？

我使用 React 构建一个存储文档的 Web 应用程序。它们以 HTML 格式创建，然后存储在数据库中。为了在应用程序中显示它们，我div使用dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{__html: this.props.page.content}} />

即使这个工作得很好，这个名字也dangerouslySetInnerHTML表明要更多地关注这种情况，但我想知道到底可以做些什么来保持足够的灵活性来加载 HTML 并使其出现在 Web 应用程序中。我相信危险这个词解决了跨站点脚本的危险，这意味着脚本可能被注入，执行有害代码。

作为一种对策，我想到在将 HTML 代码解析为div. 解决这个问题的一个库是DOMPurify。另一种方法是使用html-react-parser将 HTML 代码从数据库直接转换为 React Elements 。

这是正确的方法吗？或者有替代方案dangerouslySetInnerHTML吗？

尝试使用 webpack-dev-server 为我的应用程序提供服务时出现以下错误：

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './App' in 
'C:\Users\user\Desktop\react-resources-boilerplate\src'
 @ ./src/index.tsx 15:28-44
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx

这是我的 webpack 配置文件：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.tsx'),
  module: {
    rules: [
      {
        test: /\.ts|\.tsx$/,
        loader: "ts-loader",
      },
    ]
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

这是我的 tsconfig 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": …

我在用yarn v2安装依赖包，用yarn startcommand启动项目很顺利，但是vscode老是提示我找不到本地模块。

这是我的tsconfig.json文件：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

这是我的文件夹结构：

只是为了学习目的而设置一个基本的笨蛋形式......似乎无法渲染。没有错误。功能组件运行。只是没什么可看的...

MyForm.tsx

export const MyForm: React.FC = () => {

    console.log("MyForm has been called")
    return (

        <div>

            <Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
                {({ values, handleChange, handleSubmit, handleBlur }) => {
                    <form onSubmit={handleSubmit}>
                        <TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
                        <pre>JSON.stringify(values)</pre>
                    </form>
                }}

            </Formik>

        </div >
    )
}

我已将 MyForm 正确导入到 App.tsx 中，并且 MyForm 目前是我从 App.tsx 返回的所有内容。

没有错误。只是没什么...

我一直在研究诸如此类的几个问题，看看是否有标准实践/最佳实践来决定是否在 JavaScript、JSX 或 TSX 中的键上加引号。然而，我还没有找到任何东西，并且想知道（在建立一个关于不良实践的大型项目之前）哪个是最好的：

obj = {'foo': 'bar'}

和

obj = {foo: 'bar'}

或者更好的是，有一些我可以参考的文件吗？

我对打字稿比较陌生，并试图诊断错误。我正在制作侧边栏导航并尝试从导航数组中提取图标。

大批：

    const menuItems = [
        { id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },
        { id: 2, label: "Page 2", icon: <AcademicCapIcon />, link: "" },
        { id: 3, label: "Settings", icon: <Cog6ToothIcon />, link: "/" },
    ];

在我的代码中，错误源于此部分：

<div className="flex flex-col items-start mt-24">
                    {menuItems.map(({ icon: Icon, ...menu }) => {
                        const classes = getNavItemClasses(menu);

                        return <div className={classes}>
                            <Link href={menu.link}>
                                <div className="flex py-2 px-3 items-center w-full h-full">
                                    <div>
                                        <Icon />
                                    </div>
                                    {!toggleCollapse && (
                                        <span className={classNames('text-md font-medium …

当我从 git 存储库中提取内容、更新服务器上的所有 npm 模块并运行启动脚本时，我遇到了这些打字稿语法错误。它们都是打字稿语法错误。

我使用npm run dev（这是我的 package.json 文件中的自定义 npm 脚本）运行我的服务器，但即使仅使用npx tsc.

我尝试过的：

• 重新安装所有节点模块
• 更新所有节点模块
• 开关装置
• 设置skipLibCheck为true
• 设置checkJs为false
• 设置allowJs为false

这几乎就像打字稿忽略了exclude参数tsconfig.json

输出来自npx tsc：

$ npx tsc
node_modules/discord.js/typings/index.d.ts(1181,21): error TS1139: Type parameter declaration expected.
node_modules/discord.js/typings/index.d.ts(1181,27): error TS1434: Unexpected keyword or identifier.
node_modules/discord.js/typings/index.d.ts(1181,29): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
node_modules/discord.js/typings/index.d.ts(1182,9): error TS1005: ')' expected.
node_modules/discord.js/typings/index.d.ts(1182,11): error TS1068: Unexpected …

我正在下一个 js（带有打字稿和样式组件）上编写一个 Web 应用程序。我开始编写测试，在使用 mount 时，错误崩溃

TypeError: Cannot read property 'child' of undefined

但如果我使用浅层，一切正常。我需要使用 mount 来渲染组件中的所有元素，因为如果我使用浅层，样式组件的组件不会渲染并且我无法在其上模拟事件。我不明白问题是什么

SmartText.test.tsx：

import React from 'react'
import { mount, ReactWrapper } from 'enzyme'
import {SmartText} from '../components/UI/SmartText'

describe('Render UI', () => { 
let component: ReactWrapper
beforeEach(() => {
    component = mount(<SmartText/>)
})
describe('SmartText', () => {
    test('Snapshot', () => {
        expect(component).toMatchSnapshot()
    })
    test('Input text', () => {
        component.find('input').simulate('change', {
            target:{
                value: 'some'
            }
        })
        expect(component.find('input').prop('value')).toEqual('some')
    })
})
})

包.json

      {
      "name": "task-manager",
      "version": "0.1.0",
      "private": …