我收到TypeError错误：无法读取React中未定义的属性'content'

Question

我正在创建React项目，并想像这样向div添加类：

<div className={classes.content}>
                    In the case of deleting the Data Source, you will lose all configuration
                    settings for it. Are you sure you want to delete Data Source?
                    </div>

但是显示内容未定义，因此我真的需要您的帮助。这是完整的代码：

import React from 'react';

import { ModalDialog, StyleRules, WithStyles } from '@perf/ui-components';
import { Delete18 } from '@perf/ui-components/dist/icons/uui/action/Delete18';

import { ActionButton } from './ActionButton';
import { createModalActions } from './createModalActions';

const styles: StyleRules = {
    content:{
        fontSize:14,
        lineHeight:'24px',
    }
};
interface Props extends WithStyles<typeof styles> {
    onClick(): void;
}

const Actions = createModalActions({
    actionText: 'Delete',
    actionType: 'danger',
});

export class DeleteButton extends React.PureComponent<Props> {
    state = {
        isWarningModalShown: false,
    };

    render() {
        const { isWarningModalShown } = this.state;
        const {classes} = this.props;
        return (
            <>
                <ModalDialog
                    isShow={isWarningModalShown}
                    config={{
                        title: 'Delete data source',
                        handleCancel: this.handleDeleteClick,
                        handleConfirm: this.handleConfirm,
                        CustomDialogActions: Actions,
                    }}
                >
                    <div className={classes.content}>
                    In the case of deleting the Data Source, you will lose all configuration
                    settings for it. Are you sure you want to delete Data Source?
                    </div>
                </ModalDialog>
                <ActionButton
                    description="Delete data source"
                    Icon={Delete18}
                    onClick={this.handleDeleteClick}
                />
            </>
        );
    }

    private handleConfirm = () => {
        const { onClick } = this.props;

        this.handleDeleteClick();
        onClick();
    };

    private handleDeleteClick = () => {
        this.setState({
            isWarningModalShown: !this.state.isWarningModalShown,
        });
    };
}

如果不清楚，请告诉我

Answer 1

错误显示您尚未将classes属性传递给组件。例子是，

<DeleteButton classes={styles} />

Answer 2

您未初始化classes。您可以通过在声明级别初始化它来避免它。所以：

const {classes} = this.props || {}; //This will initialize the classes in case the this.props is empty