Question

我有具有div元素的组件。我希望能够基于该div元素的边框颜色来禁用/启用该div元素的单击。

想法是要有一种方法，该方法将返回应该在div上绘制的边框颜色，然后如果color为'green'，则将该div的pointerEvent设置为'auto'，如果不是'green'则将pointerEvent设置为'没有'。但是，当我尝试执行该操作时却遇到奇怪的语法错误，我不知道为什么会发生，我认为代码还可以，但是Typescript中的其他一些配置可能是错误的。我收到的错误如下所示

[ts] 输入'{pointerEvents：字符串;显示：字符串； border：字符串;高度：字符串；宽度：字符串； marginLeft：字符串; }' 不是可分配给类型“ CSSProperties”。属性“ pointerEvents”的类型不兼容。类型“字符串”不可分配给类型“ PointerEventsProperty”。 [2322]

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

[ts]类型'string'不能分配给类型'“ -moz-initial” | “继承” | “初始” | “还原” | “未设置” | “全部” | “汽车” | “填充” | “无” | “画” | “中风” | “可见” | “ visibleFill” | “ visiblePainted” | “ visibleStroke” |可观察<...>'。 [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

当我尝试在ReactJs应用程序中定义指标事件属性时遇到错误

1 个答案: