Блог

Я пытаюсь изменить цвет div в react с помощью диктанта.

 import * as React from 'react'  import {  container } from './zoneButton.module.css'  const ZoneButton = ({ colour }) =gt; {   const colourPrimaryDict = {  'pink': 'var(--pastel-pink-primary)'  }  const colourSecondaryDict = {  'pink': 'var(--pastel-pink-secondary)'  }   return (  lt;div className={container} style={{  backgroundColor: colourPrimaryDict[{ colour }],  color: colourSecondaryDict[{ colour }]  }}gt;  { colour }  lt;/divgt;  ) }  export default ZoneButton  

Когда я ввожу «розовый» в диктант, цвет div меняется, однако, когда я пытаюсь пройти через опору { color}, которой присвоена строка «розовый», диктант не возвращает запрошенный цвет.

 lt;ZoneButton colour={'pink'}/gt;  

Если это плохой способ делать что-то, есть ли лучший способ?

Синтаксис для динамической попытки доступа к свойству объекта немного отличается:

 import * as React from 'react'  import {  container } from './zoneButton.module.css'  const ZoneButton = ({ colour }) =gt; {   const colourPrimaryDict = {  'pink': 'var(--pastel-pink-primary)'  }  const colourSecondaryDict = {  'pink': 'var(--pastel-pink-secondary)'  }   return (  lt;div className={container} style={{  backgroundColor: colourPrimaryDict[colour],  color: colourSecondaryDict[colour]  }}gt;  { colour }  lt;/divgt;  ) }  export default ZoneButton  

Надеюсь, это поможет!