【发布时间】：2019-07-01 12:34:39
【问题描述】：
我有一个包含 div 元素的组件。我希望能够根据该 div 元素的边框颜色禁用/启用单击该 div 元素。
想法是有一个方法，它将返回应该在 div 上绘制的边框颜色，然后如果颜色为“绿色”，则将该 div 的指针事件设置为“自动”，如果它不是“绿色”，则将指针事件设置为“没有'。但是，当我尝试执行我无法弄清楚为什么会发生的事情时，我遇到了奇怪的语法错误，我认为代码没问题，但是 Typescript 中的其他一些配置可能是错误的。我得到的错误如下所示
[ts] 类型'{指针事件：字符串；显示：字符串；边框：字符串；高度：字符串；宽度：字符串；边距左：字符串； }' 不是 可分配给类型“CSSProperties”。 属性“pointerEvents”的类型不兼容。 类型“字符串”不可分配给类型“PointerEventsProperty”。 [2322]
我尝试将属性设置为一个值“无”或“自动”，效果很好，但是当我输入条件语句时它不起作用。我尝试将我的样式设置为 CSSProperties 类型，但随后出现如下所示的错误：
[ts] 类型 'string' 不可分配给类型 '"-moz-initial" | “继承” | “初始” | “还原” | “未设置” | “全部” | “汽车” | “填” | “无” | “画” | “中风” | "可见" | "可见填充" | “看得见的画” | “可见中风” |可观察的<...>'。 [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'。
实际结果是上述语法错误，无法编译。
【问题讨论】：
标签： reactjs typescript pointer-events