Не могу понять, как изменить css, используя реквизит в стилизованных компонентах и ​​хук useState - PullRequest
Новая
       12

Не могу понять, как изменить css, используя реквизит в стилизованных компонентах и ​​хук useState

0 голосов
/ 01 февраля 2020

Попытка изменить значение grid-column для styled.div на основе ввода пользователя с помощью стилизованных кнопок. У меня есть grid-column значения, настроенные как реквизиты в стилизованном компоненте, например: 

const Highlight = styled.div`
  display: block;
  margin: -0.5rem;
  padding: 0;
  border: 1px solid #00fff3;
  border-radius: 16px;
  z-index: 2;
  background: hsla(177, 100%, 21%, 0.25);
  grid-row: 1 / 2;
  grid-column:
    ${props =>
        props.key === 'C' ? `1 / 9` :
        props.key === 'Db' ? `2 / 10` :
        props.key === 'Eb' ? `3 / 11` : 
        `1 / 9`
     };
`

, а значение реквизита находится в состоянии, например: 

const [ key, setKey ] = useState()

... тогда реквизит находится на стилизованном компоненте, например: 

<Highlight key={key}/>

... затем значение этой реквизита изменяется при нажатии любой из следующих кнопок: 

<C onClick={() => setKey('C')}>C</C>
<D onClick={() => setKey('D')}>D</D>
<E onClick={() => setKey('E')}>E</E>
<F onClick={() => setKey('F')}>F</F>
<G onClick={() => setKey('G')}>G</G>
<A onClick={() => setKey('A')}>A</A>
<B onClick={() => setKey('B')}>B</B>
<DFlat onClick={() => setKey('Db')}>Db</DFlat>
<EFlat onClick={() => setKey('Eb')}>Eb</EFlat>
<GFlat onClick={() => setKey('Gb')}>F#/Gb</GFlat>
<AFlat onClick={() => setKey('Ab')}>Ab</AFlat>
<BFlat onClick={() => setKey('Bb')}>Bb</BFlat>

... но это еще не работает, поэтому я что-то делаю неправильно или что-то упускаю, но я не знаю, что я делаю неправильно.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2020

Как указано в реагирующей документации , ключи являются зарезервированным атрибутом для элементов в React

«Ключ» - это специальный строковый атрибут, который необходимо включить при создании списков элементов.

Таким образом, вы можете рассмотреть возможность изменения вашего реквизита на более подходящее имя, например gridColumnKey. 

const Highlight = styled.div`
  display: block;
  margin: -0.5rem;
  padding: 0;
  border: 1px solid #00fff3;
  border-radius: 16px;
  z-index: 2;
  background: hsla(177, 100%, 21%, 0.25);
  grid-row: 1 / 2;
  grid-column:
    ${props =>
        props.gridColumnKey === 'C' ? `1 / 9` :
        props.gridColumnKey === 'Db' ? `2 / 10` :
        props.gridColumnKey === 'Eb' ? `3 / 11` : 
        `1 / 9`
     };
`

И на компоненте, который отображает Highlight стилизованный компонент, 

<Highlight gridColumnKey={key}/>
0 голосов
/ 01 февраля 2020

key - неявная опора в ReactJS. Из документов:

Ключи служат подсказкой для React, но они не передаются вашим компонентам. Если вам нужно то же значение в вашем компоненте, передайте его явно как реквизит с другим именем

Список и ключи - Документы

Таким образом, чтобы передать prop, вам нужно использовать другое имя от key, и вы должны быть хороши до go.

...