相关疑难解决方法(0)

我正在开发一个使用打字稿以及反应的项目,对两者都是新手.我的问题是关于打字稿中的界面以及它与道具和状态的关系.究竟发生了什么？除非我声明接口道具和状态,否则我的应用程序根本不会运行,但是我通过反应构造函数使用状态,并且我已经看到所有这些信息将进入"接口MyProps"或"接口MyStates"的示例例

"use strict";

import * as React from 'react'
import NavBar from './components/navbar.tsx'
import Jumbotron from './components/jumbotron.tsx';
import ContentPanel from './components/contentPanel.tsx';
import Footer from './components/footer.tsx';

interface MyProps {}
interface MyState {}
class Root extends React.Component <MyProps, MyState>  {
  constructor(props) {
    super(props);
    this.state = {
      ///some stuff in here

    };
  }
  render() {
    return (
      <div>
        <NavBar/>
        <Jumbotron content={this.state.hero}/>
        <ContentPanel content={this.state.whatIs}/>
        <ContentPanel content={this.state.aboutOne}/>
        <ContentPanel content={this.state.aboutTwo}/>
        <ContentPanel content={this.state.testimonial}/>
        <Footer content={this.state.footer}/>
      </div>
    )
  }
}
export default Root;

(我已经删除了this.state中的内容,只是为了在这里发布).为什么我需要界面？这样做的正确方法是什么,因为我认为我是以jsx方式而不是tsx方式考虑这个问题.

我正在尝试在React中为SurveyJS中实现的调查实现一个处理程序.这适用于多项选择题,可能有"无以上"或"不愿回答"等答案.如果选择了其中一个答案,则应清除所有其他答案,如果选择了不同的答案,则应清除这些复选框.我对其中任何一个单独做得很好,但是对于存在两个选项的问题都有问题,特别是在两个特殊选项之间来回切换时.

我认为发生的是当一个答案触发处理程序并取消选中另一个复选框时,它会再次触发处理程序.我的解决方案是设置一个状态,指示处理程序何时处于此过程的中间,而不是在此时再次执行.

我在这里得到了一个JS解决方案:https://github.com/surveyjs/editor/issues/125 - 以下是我尝试将其转换为React.(只包括代码的相关部分.)

但是,在编译时,它会出现以下错误:

[at-loader]中的错误./src/components/Sur​​vey/SurveyContainer.tsx:55:19 TS2339:属性'ValueChanging'在'Readonly <{}>'类型中不存在.

我找不到任何有关此特定错误的信息.其他对状态的引用(即我设置它的地方)正在工作.为什么我不能读它？

谢谢!

零件:

import * as React from 'react';
import { Component } from 'react';
import { Survey, surveyStrings } from 'survey-react';
import 'whatwg-fetch';
import Marked from '../Marked';
import * as style from './style';

interface Props {
  surveyJson: object;
  complete: boolean;
  resultMarkdown: string;
  surveyTitle: string;
  sendSurveyAnswers: (answers: object[]) => void;
  noneOfTheAboveHandler: (survey: object, options: object) => void;
}

Survey.cssType = 'standard';
surveyStrings.progressText = '{0}/{1}';
surveyStrings.emptySurvey = '';

export …