Typescript React:如何添加用于根节点的组件


A simplified version of my component looks like this:

import * as React from 'react';

export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
  // The component used for the root node.
  // Either a string to use a DOM element or a component.
  component?: React.ReactType<DividerProps>;
  // Additional classes.
  className?: string;

const Divider: React.SFC<DividerProps> = (props) => {
  const { className, component: Component } = props;

  // Error: [TS] JSX element type Component<>DividerProps, 
  // ComponentState> is not a constructor function for JSX elements
  return <Component className={className} />; 

Divider.defaultProps = {
  component: 'hr',

export { Divider };

Successfully compiled but has the following linter error:

[TS] JSX元素类型Component'DividerProps,ComponentState'不是JSX元素的构造函数 . 属性“render”的类型是不兼容的 .

Dependencies: "@types/react":"16.3.13","react":"16.3.2","typescript":"2.8.3",...