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

Question

我有一个包含 div 元素的组件。我希望能够 disable/enable 根据 div 元素的边框颜色单击 div 元素。

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

[ts] Type '{ pointerEvents: string; display: string; border: string; height: string; width: string; marginLeft: string; }' is not assignable to type 'CSSProperties'. Types of property 'pointerEvents' are incompatible. Type 'string' is not assignable to type 'PointerEventsProperty'. [2322]

我试图将属性设置为一个值 'none' 或 'auto' 并且工作正常，但是当我放入条件语句时它不起作用。我试图将我的样式设置为 CSSProperties 类型，但随后出现如下所示的错误：

[ts] Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "all" | "auto" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke" | Observable<...>'. [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 方法 return 颜色不是绿色时，点击 div 将被禁用。当 whatColorToDraw 方法 returns 'green' pointerEvent 应该设置为 'auto'.

实际结果是上述语法错误，无法编译

Answer 1

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

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

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

Getting error when I try to define pointerEvent property within ReactJs application

reactjs

typescript

pointer-events

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

Getting error when I try to define pointerEvent property within ReactJs application

reactjs

typescript

pointer-events

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