为什么destructure重命名会导致TypeScript / React出错？

Question

我是TypeScript的新手并且遇到了我无法解密的错误：JSX element type 'Controls' does not have any construct or call signatures. 我试过浏览文档，但只是更加困惑。如果我将其渲染为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";

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;