Аргумент типа 'string' не может быть назначен параметру типа 'IScriptEditorProps' - PullRequest
Новая
       43

Аргумент типа 'string' не может быть назначен параметру типа 'IScriptEditorProps'

0 голосов
/ 18 февраля 2020

Сейчас я протестировал множество решений и на самом деле просто хотел внедрить этот редактор сценариев в SharePoint. По какой-то причине у конструктора не было аргументов, когда я пытался реализовать его, поэтому я подумал, что смогу выяснить, в чем дело, но не могу. 

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(script: string, title: string) {
  super(script, title);

  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 (
    <div>
      <div className={styles.scriptEditor}>
        <div className={styles.container}>
          <div
            className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}
          >
            <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
              <span className="ms-font-xl ms-fontColor-white">
                {this.props.title}
              </span>
              <p className="ms-font-l ms-fontColor-white"></p>
              <DefaultButton
                description="Opens the snippet dialog"
                onClick={this._showDialog}
              >
                Edit snippet
              </DefaultButton>
            </div>
          </div>
        </div>
      </div>
      <Dialog
        isOpen={this.state.showDialog}
        type={DialogType.normal}
        onDismiss={this._closeDialog}
        title="Embed"
        subText="Paste your script, markup or embed code below. Note that scripts will only run in view mode."
        isBlocking={true}
        className={"ScriptPart"}
      >
        <TextField
          multiline
          rows={15}
          onChange={this._onScriptEditorTextChanged.bind(this)}
          value={this.state.script}
        />
          <DialogFooter>
          <PrimaryButton onClick={this._closeDialog}>Save</PrimaryButton>
        <DefaultButton onClick={this._cancelDialog}>Cancel</DefaultButton>
      </DialogFooter>
      {viewMode}
    </Dialog>
  </div>
);
}
}

Аргументы, из которых constructor импортируются аргументы из IScriptEditorProps

export interface IScriptEditorProps {
  script: string;
  title: string;
  save(script: string): void;
}

Какие реквизиты c я должен дать моим constructor и super метод?

1 Ответ

1 голос
/ 21 февраля 2020

В компоненте React вам просто нужно принять props в вашем конструкторе и передать его вместе с super, затем в остальной части вашего компонента, включая ваш render, вы получите значения на props, получив доступ this.props, например this.props.script. 

constructor(props) {
  super(props);

  ...
}
...