Question

我正尝试将打字稿与我现有的代码（react-redux）集成在一起，同时遇到一个错误“类型'FunctionComponent'的参数不能分配给'ComponentType，IProps >>'类型的参数。“

interface IProps{
  dispatch : Dispatch<AppActions>;
  theme: string
}

const Header: React.FC<IProps> = ({ dispatch, theme }):any => {
  const classes = useStyles();
  const [term, setTerm] = React.useState('');

  const searchFunc = () => {
    Router.push(`/search?q=${term}`);
  };

  return (
    <>
      <CssBaseline />
      <AppBar position="fixed">
        <Toolbar className={classes.appBarContent}>
          <img className={classes.logo} alt="Home" src="https://img1a.flixcart.com/www/linchpin/fk-cp-zion/img/flipkart-plus_4ee2f9.png" />
          <div className={classes.search}>
            <InputBase
              placeholder="Search…"
              classes={{
                input: classes.inputInput,
              }}
              value={term}
              onChange={(event) => { setTerm(event.target.value); }}
              inputProps={{ 'aria-label': 'search' }}
            />
            <IconButton
              className={classes.searchButton}
              aria-label="Search"
              onClick={() => searchFunc()}
            >
              <SearchIcon />
            </IconButton>
          </div>
          <IconButton
            className={classes.themeButton}
            onClick={() => dispatch(appActions.changeTheme(theme === 'light' ? 'dark' : 'light'))}
          >
            <HighlightIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Toolbar />
    </>
  );
};

Header.propTypes = {
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = (state:AppState) => ({
  theme: state.app.theme,
});

export default connect(mapStateToProps)(Header);

我收到一条错误消息：类型'FunctionComponent<IProps>'的参数不能分配给类型'ComponentType<Matching<{ theme: String; } & DispatchProp<AnyAction>, IProps>>'的参数。类型'FunctionComponent<IProps>'无法分配给类型'FunctionComponent<Matching<{ theme: String; } & DispatchProp<AnyAction>, IProps>>'。参数“ props”和“ props”的类型不兼容。类型'PropsWithChildren<Matching<{ theme: String; } & DispatchProp<AnyAction>, IProps>>'无法分配给类型'PropsWithChildren<IProps>'。 'PropsWithChildren<Matching<{ theme: String; } & DispatchProp<AnyAction>, IProps>>'类型不能分配给“ IProps”类型。属性“主题”的类型不兼容。类型“字符串”不可分配给类型“字符串”。 “字符串”是基元，但是“字符串”是包装对象。尽可能使用“字符串”。

错误：“ FunctionComponent <IProps>”无法分配给ComponentType <Matching <{theme：String}＆DispatchProp <AnyAction>，IProps >>

0 个答案: