typescript - Primește eroare când încerc să definesc proprietatea pointerEvent în cadrul unei aplicații ReactJs

Am un component care are un element div. Vreau să pot dezactiva/activa clicul pe acel element div în funcție de culoarea marginii acelui element div.

Ideea este să avem o metodă care să returneze ce culoare de margine ar trebui desenată pe div, și apoi, dacă culoarea este 'verde', să setăm pointerEvent al acelui div la 'auto', iar dacă nu este 'verde', să setăm pointerEvent la 'none'. Totuși, primesc o eroare ciudată de sintaxă când încerc să fac asta, pe care nu pot să o înțeleg de ce apare, cred că codul este în regulă, dar poate o altă configurație din Typescript este greșită. Eroarea pe care o primesc este prezentată mai jos.

[ts] Tipul '{ pointerEvents: string; display: string; border: string; height: string; width: string; marginLeft: string; }' nu poate fi atribuit tipului 'CSSProperties'. Tipurile proprietății 'pointerEvents' sunt incompatibile. Tipul 'string' nu poate fi atribuit tipului 'PointerEventsProperty'. [2322]

Am încercat să setez proprietatea să fie doar o valoare „none” sau „auto” și funcționează bine, dar când o pun într-o instrucțiune condițională, nu funcționează. Am încercat să setez stilul meu să fie de tip CSSProperties, dar apoi primesc eroarea arătată mai jos:

[ts] Tipul 'string' nu poate fi atribuit tipului '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'all' | 'auto' | 'fill' | 'none' | 'painted' | 'stroke' | 'visible' | 'visibleFill' | 'visiblePainted' | 'visibleStroke' | Observable<...>. [2322]

Definiția stilului:

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

Apel la acel stil:

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

Metoda de a desena culoarea

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

Rezultatul așteptat este ca pointerEvents să fie setat pe none, ceea ce înseamnă că click-ul pe div va fi dezactivat atunci când metoda whatColorToDraw returnează o culoare diferită de verde. Când metoda whatColorToDraw returnează 'green', pointerEvent ar trebui să fie setat pe 'auto'.

Rezultatul actual este o eroare de sintaxă descrisă mai sus și nu poate fi compilat.

Răspuns #1

Pentru Typescript ajută cu adevărat

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

Răspunsul #2

Eliminați back-tick-ul (``) și interpolarea șirului $ {}, astfel încât pointerEvents să nu fie considerat ca șir.

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