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

Question

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

想法是有一个方法可以返回应该在 div 上绘制什么边框颜色，然后如果颜色是“绿色”，则将该 div 的 pointerEvent 设置为“auto”，如果它不是“绿色”，则将 pointerEvent 设置为“没有任何'。但是，当我尝试做我无法弄清楚为什么会发生的事情时，我遇到了奇怪的语法错误，我认为代码没问题，但 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]

我试图将属性设置为“无”或“自动”的一个值，并且效果很好，但是当我放入条件语句时它不起作用。我试图将我的样式设置为 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 方法返回绿色以外的颜色时，将禁用对 div 的点击。当 whatColorToDraw 方法返回 'green' 时，pointerEvent 应该设置为 'auto'。

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

Answer 1

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

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