Question

我已升级到打字稿3.2.2，并且此用于编译的代码现在无法编译：

export const Heading: React.SFC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {
  const Tag = `h${level}`;

  return (
    <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>
      {children}
    </Tag>
  );
};

出现错误：

类型'IntrinsicAttributes'不存在属性'tabIndex'。

Answer 1

I don't use React.SFC.
I have use the React component just like:-
export default class Heading extends React.Component<Props, {}>
may be you will use the below code, I think you will find the solution:-

interface HeadingProps {
    tabIndex: any,
}

    export const Heading: React.SFC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {
      const Tag = `h${level}`;

      return (
        <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>
          {children}
        </Tag>`enter code here`
      );
    };
and also need to define the tabIndex in level class.

my code:-

import Level from './component/level';
interface HeadingProps {
    className: string,
    tabIndex: any,
}

export default class Heading extends React.Component<HeadingProps, {}>{
render(){
 const {className, tabIndex}
 return (
        <Level className={cs(className)} {...this.props.rest} tabIndex= 
          {tabIndex}>
          {this.props.children}
        </Level>
      );
    };
}


interface Props {
    tabIndex: any,
}

export default class Level extends React.Component<Props, {}> {
render(){
   return (
            <h1 tabIndex={tabIndex}>
              {this.props.text}
            </h1>
        )
   }
}

Answer 2

这有点冗长，但是通过这种方式，我已经能够使用全输入法对所有内容进行干净地编译：

const H = (
  props: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >
): JSX.Element => React.createElement("h" + this.props.size, props);

然后，您可以在组件中使用<H>，并使用size属性指定要使用的标题标记。

Answer 3

这有点晚了，并在TypeScript 3.4上进行了测试：

替换

const Tag = `h${level}`;

使用

const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

我仍然不确定tabIndex，但是现在TypeScript可以推断其他属性，例如children。

在打字稿3.2.2中创建动态组件名称

3 个答案: