绑定元素“一些测试文本”隐式具有“ any”类型

时间:2020-11-03 10:21:48

标签: html reactjs typescript jsx

我在TS编译器上遇到了问题,它引发了以下错误:绑定元素“”隐式具有“ any”类型。

在地图功能和属性(id,标题,操作,backgroundColor,颜色)上发生错误。

下面是我的代码:

export type MessageWindowComponentProps = PropsWithChildren<{
    readonly buttonsType: ButtonsType,
    readonly saveText: string,
    readonly closeText: string,
    readonly yesText: string,
    readonly noText: string,
    readonly onSaveClick?: () => void;
    readonly onCloseClick?: () => void;
    readonly onYesClick?: () => void;
    readonly onNoClick?: () => void;
}>

const classNames = bemClassNames("message-window");
const messageWindowContent = classNames("content");
const messageWindowButtons = classNames("buttons");

export const MessageWindowComponent: FunctionComponent<MessageWindowComponentProps> = ({
    children, 
    buttonsType, 
    saveText, 
    closeText, 
    yesText, 
    noText, 
    onSaveClick, 
    onCloseClick, 
    onYesClick, 
    onNoClick,
}) => {

    const typeOfButtons = {
        [ButtonsType.yesNo]: [
            {id: 1, title: {noText}, action: onYesClick, backgroundColor: ButtonBackgroundColor.whitePrimaryFixed, color: TextColor.textPrimary},
            {id: 2, title: {yesText}, action: onNoClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
        [ButtonsType.saveClose]: [
            {id: 3, title: {closeText}, action: onCloseClick, backgroundColor: ButtonBackgroundColor.whitePrimaryFixed, color: TextColor.textPrimary},
            {id: 4, title: {saveText}, action: onSaveClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
        [ButtonsType.close]: [
            {id: 5, title: {closeText}, action: onCloseClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
    };

    return (
        <div className={classNames()}>
            <div className={messageWindowContent}>
                {children}
            </div>
            <div className={messageWindowButtons}>
                <Layout justifyContent={JustifyContent.flexEnd}>
                    {typeOfButtons[buttonsType].map(({id, title, action, backgroundColor, color}) => (
                        <Layout key={id} spacingSizeLeft={SpacingSize.s}>
                            <TextButton backgroundColor={backgroundColor} color={color} shadow={false} onClick={action ?? doNothing} text={title} title={title} />
                        </Layout>
                    ))}
                </Layout>
            </div>
        </div>
    );
};

谢谢您的帮助。

1 个答案:

答案 0 :(得分:0)

编译器建议 typeOfButtons 没有指定的类型。只需向此变量添加类型,就可以了。还要检查 ButtonsType 是什么类型,以便将其放入 typeOfButtons 类型定义中。