时间戳

首页 > 解决方案 > 连接的容器组件中的类型错误

reactjs - 连接的容器组件中的类型错误

问题描述

我正在将 React 应用程序转换为 TypeScript，并且我的应用程序容器组件包含以下容器组件：

App.tsx

class App extends Component {
  render() {
    return (
      <AppContainer>
        <HeaderContainer />
        <TabContainer />
        <ViewContainer />
      </AppContainer>
    )
  }
}

export default App

HeaderContainer.tsx

const mapStateToProps = (state: AppState) => ({version: state.settings.version})

const mapDispatchToProps = () => ({})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Header)

Header.tsx

const HeaderContainer = styled('header')({
    flex: '0 0 auto',
    flexDirection: 'row-reverse',
});
const HeaderRow = styled('div')({
    padding: '10px 0px 0px 0px',
    display: 'flex',
    flexDirection: 'row-reverse',
    justifyContent: 'right',
    maxHeight: '100px',
});

const HeaderLogo = styled('img')({
    margin: '0px 5px',
    height: '80px',
    width: '80px',
    display: 'flex',
    order: 1,
});

const HeaderInfo = styled('div')({
    margin: '0px 15px 0px 10px',
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    order: 0,
});

const HeaderName = styled('div')({
    display: 'flex',
    marginTop: '7px',
    flexGrow: 1,
    order: 0,
    fontSize: '40px',
});

const HeaderVersion = styled('div')({
    display: 'flex',
    flexGrow: 1,
    order: 1,
    fontSize: '20px',
});
const Header = ({ version }) => (
  <HeaderContainer>
    <Disclaimer />
    <HeaderRow>
        <HeaderLogo src={process.env.PUBLIC_URL + "/icons/icon-512x512.png"} alt="logo" />
        <HeaderInfo>
            <HeaderName>App Name</HeaderName>
            <HeaderVersion>{version}</HeaderVersion>
        </HeaderInfo>
    </HeaderRow>
  </HeaderContainer>
)

Header.propTypes = {
  version: PropTypes.string.isRequired,
}

export default Header

我收到一个类型HeaderContainer错误App.tsx：

Type error: Property 'version' is missing in type '{}' but required in type 'Pick<InferProps<{ version: Validator<string>; }>, "version">'.

我基本明白这是在说什么。但是，我不明白为什么错误出现在HeaderContainer而不是出现Header，我也不明白为什么会出现错误，因为Header它只是connect在容器的函数内部实现，并传递给它所需的道具.

注释掉propTypesin可以消除Header错误。

标签： reactjstypescriptredux

解决方案

您是否在样式化组件内的任何地方使用 version 道具？您可能必须version像这样直接传递给样式化组件const Header = styled.div<HeaderProps>

哪里HeaderProps是：

interface HeaderProps {
    version: type
}

推荐阅读