当我尝试在 ReactJs 应用程序中定义 pointerEvent 属性时出现错误

Question

我有包含 div 元素的组件。我希望能够根据该 div 元素的边框颜色禁用/启用对该 div 元素的单击。

想法是有一个方法，该方法将返回应在 div 上绘制的边框颜色，然后如果颜色为“绿色”，则将该 div 的 pointerEvent 设置为“auto”，如果它不是“绿色”，则将 pointerEvent 设置为“none”。然而，当我尝试这样做时，我遇到了奇怪的语法错误，我无法弄清楚为什么会发生这种情况，我认为代码没问题，但 Typescript 中的其他一些配置可能是错误的。我得到的错误如下所示

[ts] 类型 '{pointerEvents: string; 显示：字符串；边框：字符串；高度：字符串；宽度：字符串；左边缘：字符串；}' 不可分配给类型“CSSProperties”。属性“pointerEvents”的类型不兼容。类型“string”不可分配给类型“PointerEventsProperty”。[2322服]第2322服[双线] 新服

我尝试将属性设置为一个值“none”或“auto”，效果很好，但是当我放入条件语句时，它不起作用。我尝试将样式设置为 CSSProperties 类型，但随后出现如下错误：

[ts] 类型“string”不可分配给类型“”-moz-initial”| “继承”| “初始”| “恢复”| “取消设置”| “全部” | “自动”| “填充”| “无” | “画”| “中风”| “可见”| “可见填充” | “可见画”| “可见中风”| 可观察<...>'。[2322服]第2322服[双线] 新服

风格定义：

            const divContainerDetailsStyle ={
                pointerEvents: `${this.whatColorToDraw('container') == 'green' ? 'auto' as PointerEventsProperty : 'none' as PointerEventsProperty }`,
                display: 'inline-block',
                border: `${this.whatColorToDraw('container') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('container')}`,
                height: '20%',
                width: '100%',
                marginLeft: '10px' 
            }

调用该样式：

            return (
                <div style={{ height: '100%', width: '100%' }}>                    
                    <div style={{ height: '100%', width: '70%', marginLeft: '30%', padding: '10px' }}>
                        <div className="row" style={divContainerDetailsStyle}>
                            <ContainerDetails container={this.state.selectedContainer != undefined ? this.state.selectedContainer : emptyContainer} containerChangeHandler={this.onContainerChangeHandler} menuItemsNames ={menuItemsNames}></ContainerDetails>
                        </div>
                        <div className="row" style={{ display: 'inline-block', border: `${this.whatColorToDraw('device') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('device')}`, height: '80%', width: '100%', marginTop: '5px', marginLeft: '10px' }}>
                            <DeviceDetails selectedDevice={this.state.selectedDevice != undefined ? this.state.selectedDevice : emptyDevice} />
                        </div>
                    </div>
                </div>
            )

画什么颜色的方法

            whatColorToDraw(componentName) {
                switch (this.state.deviceSelected) {
                    case true && componentName == 'container':
                        return 'gray';
                    case false && componentName == 'container':
                        return 'green';
                    case true && componentName == 'device':
                        return 'green';
                    case false && componentName == 'device':
                        return 'gray';
                    default:
                        return 'black';
                }

预期结果是pointerEvents设置为none，这意味着当whatcolorToDraw方法返回绿色以外的颜色时，将禁用div上的单击。当 WhatColorToDraw 方法返回“绿色”时，pointerEvent 应设置为“自动”。

实际结果是上面描述的语法错误，并且无法编译。

Answer 1

删除反引号 (``) 和字符串插值 ${} ，这样就pointerEvents不会被视为字符串。

pointerEvents: this.whatColorToDraw('container') == 'green' ? 'auto' as PointerEventsProperty : 'none' as PointerEventsProperty