反應 & Redux tslint 警告

Question

當我使用反應和 redux 時。 connect方法會導致以下 tslint 警告/錯誤（我也不是 100% 確定此聲明）。 組件有效，但查看 tslint 錯誤讓我很生氣。

類型定義是這個interface IPrivateMenuItem extends StateProps, IMenuItem, IOwnProps {}

輸入'{孩子：字符串； 圖標：“用戶”； 到：字符串； }' 不可分配給類型 'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" | “身份證” | “到” | “圖標”> & IOwnProps'。 'IntrinsicAttributes & Pick<IPrivateMenuItem, "hasAnyAuthorities" | 類型上不存在屬性 'children' “身份證” | “到” | “圖標”> & IOwnProps'.ts(2322)

我嘗試了像const PrivateMenuItem: React.FC<IPrivateMenuItem>這樣的組件定義。 但是警告沒有機會消失。 除非我刪除連接語句。 由於 redux 要求，這是不可能的。

然后，我將功能組件的 prop 類型切換為如下定義的IPrivateMenuItem 。 然后問題就沒有了。 我的問題是這是最佳做法還是有更簡單的做法？

interface IPrivateMenuItem extends StateProps, IMenuItem, React.PropsWithChildren<IOwnProps> {}

沒有導入的完整功能組件代碼是

interface IOwnProps {
  hasAnyAuthorities?: string[];
}

interface IPrivateMenuItem extends StateProps, IMenuItem, React.PropsWithChildren<IOwnProps> {}

const PrivateMenuItem = ({ isAuthorized, id, to, icon, children }: IPrivateMenuItem) => {
  return isAuthorized ? (
    <MenuItem id={id} to={to} icon={icon}>
      {children}
    </MenuItem>
  ) : (
    <></>
  );
};

const mapStateToProps = ({ authentication: { account } }: IRootState, { hasAnyAuthorities = [] }: IOwnProps) => ({
  isAuthorized: hasAnyAuthority(account.authorities, hasAnyAuthorities),
});

type StateProps = ReturnType<typeof mapStateToProps>;

export default connect(mapStateToProps)(PrivateMenuItem);

Answer 1

沒有看到整個組件有點困難，但如果它有幫助

連接的完整類型如下

connect<TheMapStateToPropsType, TheDispatchToPropsType, TheComponentPropsType, TheStorePropsType>

您可以像這樣鍵入組件：（我正在使用 class 進行操作，但您獲得了功能組件的精神）

interface OwnProps { }
interface StateProps { }
interface DispatchProps { }

type Props = OwnProps & StateProps & DispatchProps; 

export class MyComponent extends Component<Props> { } 

const mapStateToProps = (state): StateProps => ({ 
})

const mapDispatchToProps = (dispatch): DispatchProps => {
    return {
    }
}


export default connect<StateProps,DispatchProps,OwnProps,StorePropsIfYouWant>(mapStateToProps, mapDispatchToProps)(MyComponent)