У меня есть компонент, который имеет элемент div.Я хочу иметь возможность отключить / включить щелчок по этому элементу div на основе цвета границы этого элемента div.
Идея состоит в том, чтобы иметь метод, который будет возвращать, какой цвет границы должен быть нарисован на div, а затем, если цвет равен 'green', тогда установите pointerEvent этого div на 'auto', если он не установлен 'green'pointerEvent to 'none'.Однако я получаю странную синтаксическую ошибку, когда пытаюсь сделать то, что не могу понять, почему это происходит, я думаю, что код в порядке, но некоторые другие конфигурации в Typescript могут быть неправильными.Ошибка, которую я получаю, показана ниже
[ts] Type '{pointerEvents: string;дисплей: строка;граница: строка;высота: строка;ширина: строка;marginLeft: строка;} 'нельзя назначить типу' CSSProperties '.Типы свойства pointerEvents несовместимы.Тип 'string' нельзя назначить типу 'PointerEventsProperty'.[2322]
Я пытался задать свойству только одно значение «none» или «auto», и это прекрасно работает, но когда я добавляю условное выражение, оно не работает.Я попытался установить свой стиль на тип CSSProperties, но затем я получаю сообщение об ошибке, показанное ниже:
[ts] Тип 'string' не может быть назначен типу '' -moz-initial '|"наследовать" |«начальный» |"вернуться" |"unset" |"все" |"авто" |"заполнить" |"нет" |"нарисованный" |"инсульт" |"видимый" |"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, то есть нажатие на div будет отключено, когда метод whatcolorToDraw вернет цвет, отличный от зеленого.Когда метод whatColorToDraw возвращает значение «green», pointerEvent должен иметь значение «auto».
Фактическим результатом является описанная выше синтаксическая ошибка, и он не может быть скомпилирован.