Reactjs 为什么破坏结构重命名会导致TypeScript/React中出现错误？

我对TypeScript非常陌生，遇到了一个我无法破译的错误：

JSX元素类型“Controls”没有任何构造或调用签名。

我试着看了看文件，但结果弄得更糊涂了。如果我将其呈现为

DefaultControls

，它会工作，但在使用destructure rename语法时不会工作。如何修复此错误

import * as React from "react";
import DefaultControls from "../comps/DefaultControls";

interface IProps {
  picturesAmount?: number;
  amount?: number;
  controls?: React.ReactNode;
}

class ImageShow extends React.Component<IProps, {}> {
  public static defaultProps = {
    controls: DefaultControls
  };

  public outer: React.RefObject<HTMLDivElement> = React.createRef();

  public render() {
    const { controls: Controls } = this.props;
    return (
      <React.Fragment>
        <div className="image-show" ref={this.outer}>
          <Controls />
        </div>
      </React.Fragment>
    );
  }
}

export default ImageShow;

import*as React from“React”；
从“./comps/DefaultControls”导入默认控件；
接口IProps{
图片装载量：编号；
金额？：数字；
控件？：React.ReactNode；
}
类ImageShow扩展了React.Component{
公共静态defaultProps={
控件：默认控件
};
public-outer:React.reObject=React.createRef（）；
公共渲染（）{
const{controls:controls}=this.props；
返回(
);
}
}
导出默认图像显示；

和控件组件

import * as React from "react";

interface IControlsProps {
  onBackClick: () => void;
  onNextClick: () => void;
}

const DefaultControls: React.SFC<IControlsProps> = props => (
  <React.Fragment>
    <button onClick={props.onBackClick}>{"<"}</button>
    <button onClick={props.onNextClick}>{">"}</button>
  </React.Fragment>
);

export default DefaultControls;

import*as React from“React”；
接口IControlsProps{
反单击：（）=>作废；
onNextClick:（）=>void；
}
const DefaultControls:React.SFC=props=>(
{""}
);
导出默认控件；

你能不能显示你的

控件

界面或其他什么东西。@zishe你是说组件吗？添加了itI，我认为如果您定义

defaultProps:IProps

，您将看到一个错误。我不认为类名实际上算作

React.ReactNode

，我也不认为您可以像这样使用

ReactNode

。react节点将用作

{controls}

。