typescript - Får fel när jag försöker definiera pointerEvent-egenskapen inom en ReactJs-applikation

Jag har en komponent som har ett div-element. Jag vill kunna inaktivera/aktivera klickning på det div-elementet baserat på div-elementets kantfärg.

Idén är att ha en metod som returnerar vilken kantfärg som ska ritas på div:en, och sedan, om färgen är 'grön', sätta pointerEvent för den div:en till 'auto', och om det inte är 'grön', sätta pointerEvent till 'none'. Men jag får ett konstigt syntaxfel när jag försöker göra det, vilket jag inte kan lista ut varför det händer, jag tror att koden är okej, men någon annan konfiguration inom Typescript kan vara fel. Felet jag får visas nedan

[ts] Typen '{ pointerEvents: string; display: string; border: string; height: string; width: string; marginLeft: string; }' kan inte tilldelas typen 'CSSProperties'. Typerna för egenskapen 'pointerEvents' är oförenliga. Typen 'string' kan inte tilldelas typen 'PointerEventsProperty'. [2322]

Jag försökte sätta egenskapen till bara ett värde 'none' eller 'auto' och det fungerar bra, men när jag lägger in ett villkorligt uttryck fungerar det inte. Jag försökte sätta min stil till typen CSSProperties men då får jag felet som visas nedan:

[ts] Typen 'string' kan inte tilldelas typen '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'all' | 'auto' | 'fill' | 'none' | 'painted' | 'stroke' | 'visible' | 'visibleFill' | 'visiblePainted' | 'visibleStroke' | Observable<...>. [2322]

Stildefinition:

            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' 
            }

Uppmaning till den stilen:

            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>
            )

Vilken färg att rita metod

            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';
                }

Det förväntade resultatet är att pointerEvents sätts till none, vilket betyder att klick på div kommer att vara inaktiverat när whatColorToDraw-metoden returnerar en annan färg än grön. När whatColorToDraw-metoden returnerar 'grön' ska pointerEvent sättas till 'auto'.

Det faktiska resultatet är det ovan beskrivna syntaxfelet och det kan inte kompileras.

Svar #1

För Typescript hjälper det verkligen

pointerEvents: ("none" as React.CSSProperties["pointerEvents"])

Svar #2

Ta bort back-tick (``) och stränginterpolering ${}, så att pointerEvents inte betraktas som en sträng.

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

Relaterade artiklar