[英]Typescript props not matching component props when using withStyles HOC from Material UI
i have class component that is wrapped in withStyles HOC from material-ui:我有 class 组件,它包装在来自 material-ui 的 withStyles HOC 中:
type State = {
activeConversationID: number | null,
openNewMessageBox: boolean,
conversations: Conversation[] | null,
}
const styles = createStyles({
messengerContainer: {
width: "100%",
height: "88vh",
position: "relative",
display: "flex",
},
floatingButton: {
position: "absolute",
background: "#4766B0",
color: "#FFF",
bottom: 20,
left: 290,
}
});
interface Props extends WithStyles<typeof styles> {
conversations: fetchReturnType | WP_Error,
classes: any,
}
class MessagesContainer extends Component<Props, State> {
static contextType = ChatSocketContext;
constructor(props, context) {
super(props, context);
this.state = {
activeConversationID: null,
openNewMessageBox: false,
conversations: null,
}
}
/** State functions */
changeActiveConversation = (ID: number) => {
this.setState({
activeConversationID: ID,
})
}
toggleNewMessageBox = (_: any, should_reload_page_after_submit: boolean = false) => {
const { openNewMessageBox } = this.state;
this.setState({
openNewMessageBox: !openNewMessageBox,
}, () => should_reload_page_after_submit ? window.location.reload() : null)
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.messengerContainer}>
<Fab onClick={this.toggleNewMessageBox} aria-label="add" className={classes.floatingButton}>
<AddIcon />
</Fab>
</Paper>
)
}
}
export default withStyles(styles)(MessagesContainer);
Everything seems fine, but when I imported this component to my page file, when i try to use "conversations" props, it giving me this error:一切似乎都很好,但是当我将此组件导入我的页面文件时,当我尝试使用“对话”道具时,它给了我这个错误:
Type '{ conversations: fetchReturnType |
类型 '{ 对话:fetchReturnType | WP_Error;
WP_错误; }' is not assignable to type 'IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" |
}' 不可分配给类型 'IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" | "floatingButton"> & { children?: ReactNode;
"floatingButton"> & { children?: ReactNode; }'.
}'。
Property 'conversations' does not exist on type 'IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" |
类型“IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" | 上不存在属性“对话” "floatingButton"> & { children?: ReactNode;
"floatingButton"> & { children?: ReactNode; }'
}'
Here is my "page file" for reference:这是我的“页面文件”供参考:
import React from 'react';
import { NextPage, NextPageContext } from "next";
import MessengerController from "../../api/controllers/Messenger/Messenger.controller";
import { fetchReturnType, WP_Error } from "../../api/controllers/types/Messenger.types";
import MessagesContainer from "../../components/Layout/Profile/MessagesContainer2";
const Messages: NextPage<{ conversations: fetchReturnType | WP_Error }> =
({ conversations }) => <MessagesContainer conversations={conversations} />;
Messages.getInitialProps = async (_: NextPageContext) => {
const messenger = new MessengerController();
const conversations = await messenger.fetchAll();
return {
conversations,
}
}
export default Messages;
Strange, because without withStyles i got no errors.奇怪,因为没有 withStyles 我没有错误。 I used withStyles alot and in this particular case i want to use it rather than functional component with hook.
我经常使用 withStyles,在这种特殊情况下,我想使用它而不是带有钩子的功能组件。
Have you tried你有没有尝试过
export default withStyles<Props>(styles)(MessagesContainer);
or maybe you'll find out more info with或者也许你会发现更多信息
const defaultExport = withStyles<Props>(styles)(MessagesContainer);
export default defaultExport:React.Component<Props>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.