Question

为了我的死，我在过去的三个小时里都无法解决这个问题，我感到非常沮丧，因此如果我听起来很有侵略性，我会提前道歉。

我所希望的是能够为我的组件定义一个打字稿接口，并使它扩展任何组件使用的默认接口，以避免不得不声明每个该死的默认道具，例如className，{{1} }等在我自己的界面中。

我有这个组件：

onClick

现在该组件没有错误，至少打字稿没有给出任何错误。但是，如果我尝试将此组件呈现在另一个组件中，例如：

import React, { useEffect, useRef, FunctionComponent } from 'react'
import './style.scss'

interface ISideProps {
  wideModeEnabled: boolean
  toggleWideMode
  setFocus
}

const AppLayoutSide: FunctionComponent<ISideProps> = (props) => {
  const ref = useRef() as any
  ...
  ...
  etc.
  return <div {...props} />
}

错误提示：

输入'{className：string; wideModeEnabled：布尔值； toggleWideMode：   （）=>无效； setFocus：调度>; }' 不是   可分配给类型'IntrinsicAttributes＆ISideProps＆{children ?:   ReactNode; }'。

属性“ className”在类型上不存在   'IntrinsicAttributes和ISideProps和{子代？：ReactNode;   }'。ts（2322）

这显然是对的，我没有在const otherComponent = () => { return ( <div className='content'> <Menu /> <Main /> <Side className={'whatever'} //Typscript error happens here wideModeEnabled={wideMode} toggleWideMode={toggleWideMode} setFocus={setSideFocus} /> </div> ) }接口上定义className，但是我想扩展默认的react props该死的！而且，无论我尝试了什么，我似乎都无法正常工作。在线上的每本指南都一直建议将ISideProps添加到组件声明中，我确实这样做了，但并没有解决任何问题。

请帮助，我迷失了方向。

Answer 1

从react的内置界面中扩展道具并按如下方式破坏道具：

interface ISideProps extends React.HTMLAttributes<HTMLDivElement>
{
...
}

const AppLayoutSide = (props: ISideProps) => { 
const { wideModeEnabled,  toggleWideMode, setFocus, ...rest } = props;

return (<div {...rest}></div>)
}

更新

似乎HTMLProps<T>比HTMLAttributes<T>更可靠，更通用。

例如，当您想为<th>元素扩展道具时。您不能再使用HTMLAttributes<T>，而必须使用ThHTMLAttributes<T>：

interface IProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement>
{
...
}

使用HTMLProps<T>，您可以始终使用相同的签名：

interface IProps extends React.HTMLProps<HTMLTableHeaderCellElement>
{
...
}

Answer 2

我所希望的是能够为我的组件定义一个打字稿接口，并使其扩展任何组件使用的默认接口

在这种情况下，您可以定义一个DefaultProps接口，然后使用它扩展任何组件属性：

interface DefaultProps {
    onClick?: Function;
    className?:string;
}

interface ISideProps extends DefaultProps {
    wideModeEnabled: boolean;
    // ...
}

这需要对默认情况下不会收到任何道具的自定义组件进行。

另一方面，<div>或<span>之类的内置组件已经定义了与其HTML元素相对应的props。例如，一个<img>将定义一个src道具。

为了使用这些预定义的接口，您可以在React模块中以@oemera suggests的形式使用它们。

Typscript / React扩展默认功能组件道具产生错误

2 个答案: