Typescript React：我是不是必须为超类构造函数指定参数。那会是啥论据？

Posted 2023-03-27

【中文标题】Typescript React：我是不是必须为超类构造函数指定参数。那会是啥论据？

【英文标题】：Typescript React: Do I have to specify arguments for the super class constructor. And what arguments would that be?Typescript React：我是否必须为超类构造函数指定参数。那会是什么论据？

【发布时间】：2020-05-26 23:19:37

【问题描述】：

你好，所以整个事情对我来说并不是很清楚，我仍然对我的构造函数真正想要的具体参数感到困惑。如果对您来说很明显，您能告诉我super() 和constructor() 的构造函数参数必须是什么吗？

import * as React from "react";
import styles from "./ScriptEditor.module.scss";
import  IScriptEditorProps  from "./IScriptEditorProps";
import 
  Dialog,
  DialogType,
  DialogFooter
 from "office-ui-fabric-react/lib/Dialog";
import 
  DefaultButton,
  PrimaryButton
 from "office-ui-fabric-react/lib/Button";
import  TextField  from "office-ui-fabric-react/lib/TextField";
import  loadStyles  from "@microsoft/load-themed-styles";
require("./overrides.css");

export default class ScriptEditor extends React.Component<
  IScriptEditorProps,
  any
> 
  **constructor(IScriptEditorProps, any) 
    super(IScriptEditorProps, any);**

    this._showDialog = this._showDialog.bind(this);
    this._closeDialog = this._closeDialog.bind(this);
    this._cancelDialog = this._cancelDialog.bind(this);
    this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(
      this
    );

    const uiFabricCSS: string = `
    .pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover 
      background-color: "[theme:themeDark, default:#005a9e]";
    
    `;
    loadStyles(uiFabricCSS);
    this.state = 
      showDialog: false
    ;
  

  public componentDidMount(): void 
    this.setState( script: this.props.script, loaded: this.props.script );
  
  private _showDialog() 
    this.setState( showDialog: true );
  

  private _closeDialog() 
    this.setState( showDialog: false );
    this.props.save(this.state.script);
  

  private _cancelDialog() 
    this.props.save(this.state.loaded);
    this.setState( showDialog: false, script: this.state.loaded );
  

  private _onScriptEditorTextChanged(text: string) 
    this.setState( script: text );
  

  public render(): React.ReactElement<IScriptEditorProps> 
    const viewMode = (
      <span dangerouslySetInnerhtml= __html: this.state.script ></span>
    );

。 . .

我保留了return，因为我认为它与我的问题无关。

到目前为止，我已经来回更改了一些东西，但我几乎不了解构造函数，我真的很恼火，我的 constructor 和 super() 类想要什么参数。

【参考方案1】：

您需要像这样将props 传递给反应类构造函数：

constructor(props) 
    super(props)
    ..............

【讨论】：

我对 react 和 typescript 很陌生。我的道具到底在哪里？

props 会在您扩展 React.Component 时自动出现，您不需要定义它，您只需像我在答案中写的那样将它传递给构造函数。这有意义吗？

哦，好的，非常感谢，我想我必须分配它们。

另外，你不需要一个构造函数来绑定你的动作，如果你把你的函数切换到像这样_showDialog = (args) => ...这样的箭头函数，它们会自动绑定。希望我没有让你感到困惑。

我会尝试实现它，如果我失败了，我会恢复但谢谢！