我正在运行React应用程序的服务器端渲染。我正在express为此目的使用。整个服务器端渲染代码如下所示：

import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express from "express"
import { StaticRouter } from "react-router-dom"
import walker = require("react-tree-walker")
import { useStaticRendering } from "mobx-react"

import Helmet from "react-helmet"
import Provider from "../src/Provider"
import { StaticRouterContext } from "react-router"
import version = require("../version")

var _template: string = require(`../dist/${version.v()}/index.html`)

interface IRenderResponse {
    statusCode: number,
    template: string,
    redirect?: string
}

const run = (url: string, locale?: string): Promise<IRenderResponse> => { …

假设我有一些JSON文件（将其命名为template.json）

{
    "myField1": "",
    "myField2": ""
}

我也有一种通用的课程

{
    "myField1": "",
    "myField2": ""
}

我在Typescript项目中像一种类型一样使用它：

export default GenericClass<T> {
    // Creating an empty constuctor with passed type.
    // to allow define type automatically.
    // This allow us not to manually set generic type for class
    // and also allows Webpack to pick up changes.
    constructor(template?: T) {} 

    // ...some fields and methods

    get typedField(): T {
        return /* something slightly calculated */
    }
}

我正在运行webpack开发服务器，并在某处使用它：

import …

使用Telegram第三方授权的唯一记录方法是使用https://core.telegram.org/widgets/login提供的脚本

这个脚本（正如我所挖掘的）以非常奇怪的方式工作

1. 它将在其中呈现“使用电报登录”按钮，并iframe带有另一个附加功能script，该按钮可加载要使用的某些电报实体（例如TWidgetLogin，TSticker （？），TVideo （??），TAudio （???）和其他一些）。
2. 通过单击按钮，这iframe将打开正在执行授权的新窗口。
3. 授权完成后，此窗口将关闭，既然完成了，请iframe再次检查授权。如果操作正确，则iframe检索所有共享的用户信息，并取决于授权结束调用的类型，data-onauth或将请求发送到data-auth-url。

对于我来说，这种行为确实无法使用，因为我们也在附近使用Google，Github和Facebook OAuths，它们都提供了正常可用的API来手动打开授权窗口并重定向到指定的url。

我的意思是，例如，这就是我们的Google授权的工作方式：

1. 用户单击我们自己创建的按钮，该按钮经过定制以匹配我们的应用程序样式。
2. 点击后，我们的应用程序会创建带有网址的新窗口 https://hostname/some/path/to/auth?and_some_params=here
3. 我们的服务器将其捕获，并重定向到Google OAuth同意屏幕。
4. 完成Google授权后，它将用户重定向到另一个 /some/path/to/completed_authorization
5. 服务器检索所有必要的信息，然后将/some/path/to/success_authorization具有脚本的窗口重定向到window.postMessage具有授权信息的父窗口。
6. 父窗口（应用程序窗口）捕获此消息，关闭窗口并使用给定的用户数据填充存储。

到此为止。由于打开的窗口是由应用程序打开的，因此可以在不使用该窗口时对其进行控制和关闭（例如，当打开另一个身份验证窗口或关闭应用程序选项卡时）。

电报中的“用电报登录”按钮不合适的是：

1. 无法风格化按钮以匹配应用程序样式
2. 不可能更改按钮的内容（在我们的情况下是必须的，因为我们的应用程序是多语言的）。
3. 无法控制打开的窗口（即使关闭了主窗口也正在打开）

现在，我可以使用Telegram OAuth屏幕打开一个窗口

// some code above
this.popup = window.open("https://oauth.telegram.org/auth?bot_id=<my_bot_id>&origin=http%3A%2F%2F<mydevorigin>&request_access=write, "authWindow", <some window params>)
// some code below

但是由于授权已完成，因此我无法设置任何内容让服务器知道它应该检索用户数据并使用以下命令重定向到我的页面 window.postMessage

没有其“使用电报登录”按钮，是否有任何方法可以实现电报授权？非常感谢您的帮助。

假设我有使用一些旧包的遗留代码库：

"mobx": "5.15.4",
"mobx-react": "6.1.8",

在开发一些新的实验性功能时，我想使用这些软件包的较新版本，但也必须将遗留功能保留在工作状态。因此，我为新版本的软件包添加了别名，这样我就可以将它们与旧版本一起使用：

"@new/mobx": "npm:mobx@^6.3.13"
"@new/mobx-react": "npm:mobx-react@^7.2.1"

但mobx-react用作mobx对等依赖。显然，问题在于@new/mobx-react正在观看旧mobx版本，并且预计应该有mobx6+ 版本。

有没有什么方法可以手动解决 的对等依赖关系@new/mobx-react，以便它会监视@new/mobx而不仅仅是mobx？或者，也许有一种方法可以隐式安装对等依赖项，@new/mobx-react而不会覆盖旧mobx版本？

看起来很简单，但我无法处理这个问题我总是在控制台中收到相同的消息：

类型错误：类型 '(event: MouseEvent) => void' 不可分配给类型 '() => Event'。TS2322

这是我的代码：

//in one class  
//some code 
render() 
    return (
        <div className={keyStyle} key={key} onClick={() => this.props.turnKey()}></div>
    )

//in other classs
//some code
    return (
       <div className="container">
          <Display />
          <Keys turnKey={this.activateKey}/>
       </div>
    );
  }

  activateKey = (event : React.MouseEvent): void =>{
      console.log(event.target);
  }

我该如何解决这个错误？

我必须使界面适合两种不同的颜色主题 - 浅色和深色。用户通过按钮/开关/任何方式选择颜色主题。

问题（我认为）是我的 React 应用程序是通过 Webpack 捆绑的，所以我所有的 SASS 编译样式都被嵌入到主 HTML 模板中<style>...</style>（每个style标签都引用了它的 SASS 文件）。我知道，我可以为应用程序包装器分配一些类名，然后为每个需要重新着色的选择器编写嵌套样式。但它的效率并不高，例如，根据用户选择的颜色主题导入必要的 SASS 文件。

有没有办法更好地解决这个问题？

当我从事机器人开发时，我发现来自用户的消息有一些名为 的字段username，例如

{
    update_id: 123567890,
    message: {
        message_id: 1,
        from: {
            id: 1234567890,
            is_bot: false,
            first_name: "Kappa",
            last_name: "Pride",
            username: "kappapride",
        }
    ...
}

该字段是否包含唯一值，例如idfield？我知道，我可以与它建立 TG 链接（如@kappapride），但我不确定该字段是否为每个 TG 用户提供。

编辑

很抱歉显示错误的用例。通过中的所有输入Form都将通过传递this.props.children，并且它们可以位于组件树的任何深处，因此将handleChange直接传递给输入的方法根本行不通。

这是问题重现的代码片段。

class CustomSelect extends React.Component {
  items = [
    { id: 1, text: "Kappa 1" },
    { id: 2, text: "Kappa 2" },
    { id: 3, text: "Kappa 3" }
  ]
  
  state = {
    selected: null,
  }
  
  handleSelect = (item) => {
    this.setState({ selected: item })
  }
  
  render() {
    var { selected } = this.state
    return (
      <div className="custom-select">
        <input
          name={this.props.name}
          required
          style={{ display: "none" }} // or type="hidden", whatever
          value={selected
            ? …

无言的小提琴与情况再现

关键代码是：

class Form extends React.Component {
    handleSubmit(evt) {
        evt.preventDefault()

        var data = {}
        for (var i = 0; i < this.form.elements.length; i++) {
        var elt = this.form.elements[i]
          if (elt.name) {
            data[elt.name] = elt.value
          }
        }

        this.props.onSubmit(data)
        return false
    }

    submit() {
        if (this.form.checkValidity())
            this.form.dispatchEvent(new Event('submit'))
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)} ref={r => this.form = r}>
                {this.props.children}
            </form>
        )
    }
}

之后this.form.dispatchEvent()的evt.preventDefault()在handleSubmit()不工作在Firefox

如果您在Chrome（例如）中打开小提琴，然后在字段中输入数据，您将在控制台中看到它-防止调度事件的工作将非常有效。

在Firefox中，阻止不起作用-在记录数据后，该页面会立即重新加载（请参阅控制台中的“ APP CONSTRUCTOR”）。

因此，问题很明显：如何避免该错误？

我有以下项目结构：

<PROJECT_FOLDER>
??? node_modules
??? src
?   ??? components
?   ?   ??? MyAwesomeComponent.tsx
?   ??? views
?   ?   ??? MyAwesomeView
?   ?       ??? index.tsx
?   ??? Application.tsx
?   ??? index.tsx
??? webpack.config.js
??? tsconfig.json

和以下 tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "moduleResolution": "classic",
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "sourceMap": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,

        "baseUrl": ".",
        "paths": {
            "*": [
                "src/*",
                "node_modules/*"
            ]
        },
    }
}

假设我react在node_modules（甚至@types/react安装）。当我尝试导入某些内容时，例如import * …

我有一些代码用来typeof window == "undefined"检查是否存在浏览器环境。当我使用 启动此代码时ts-node，我得到以下信息：

typings/Console.ts:36:10 - error TS2304: Cannot find name 'window'.

36      typeof window == "undefined"
               ~~~~~~

AFAIKtypeof是一种可以安全地与未定义的变量一起使用的运算符，并且它在浏览器和 NodeJS 环境中都运行良好。但当我开始使用它时ts-node，它开始抛出。

我的tsconfig.json

{
    "compilerOptions": {
        "module": "CommonJS",
        "target": "es5",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strict": false,
        "sourceMap": true,
        "traceResolution": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "strictNullChecks": true,

        "allowJs": false,
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": [ "node" ],
        "lib": [ "es6" ],
        "downlevelIteration": …

我想创建文件工厂（例如，带翻译的JSON）。

{
    "field": "",
    "group": {
        "field_1": "",
        "field_2": ""
    },
    ...
}

我希望创建一个模板JSON，其中包含翻译中存在的所有字段，然后为每个语言环境使用一些默认值实例化它，以使我的应用程序不会丢失任何翻译字段。好吧，这很简单，在输出时，我有几个文件（基于语言环境的数量），名为<locale>.json，例如，en.json具有如下内容：

{
    "field": "en:field",
    "group": {
        "field_1": "en:group.field_1",
        "field_2": "en:group.field_2",
    },
    ...
}

现在，我想基于JSON模板创建类型或接口，以允许在我的IDE的快速建议中显示我的翻译字段（例如VS Code）。

有没有可能以方便的方式做到这一点？我知道我可以.ts使用导出的接口动态创建文件，但这不是很好，因为所有ts语法都将通过字符串提供，因此在创建过程中可能会出现一些错误。可能有什么法律途径？

明确地说，我想要一个这样的界面

interface IMyCoolInterface {
    field: string,
    group: {
        field_1: string,
        field_2: string,
    },
    ...
}