Question

我有用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);

一切似乎都很好，但是当我将此组件导入到页面文件中时，当我尝试使用“对话”道具时，它给了我这个错误：

键入'{对话：fetchReturnType | WP_Error; }”不能分配给类型“ IntrinsicAttributes＆Pick <{}，从不>＆StyledComponentProps <“ messengerContainer” | “ floatingButton”>＆{子代？：ReactNode; }'。

属性'conversations'在类型'IntrinsicAttributes＆Pick <{}，never>和StyledComponentProps <“ messengerContainer”中不存在| “ floatingButton”>＆{子代？：ReactNode; }'

这是我的“页面文件”以供参考：

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;

很奇怪，因为没有withStyles我没有错误。我大量使用了withStyles，在这种特殊情况下，我想使用它而不是使用带有钩子的功能组件。

Answer 1

您尝试过

export default withStyles<Props>(styles)(MessagesContainer);

或者也许您会发现更多信息

const defaultExport = withStyles<Props>(styles)(MessagesContainer);
export default defaultExport:React.Component<Props>

从Material UI

1 个答案: