У меня есть экземпляр компонента реагирования с подпоркой, содержащей массив строк, например:
<Keyboard notes={['cp', 'dma', 'ema', 'fp', 'gp', 'ama', 'bma']}/>
Цель компонента - создать клавиатуру пианино и вызывать ее в любом месте приложения Я строю, передаю массив имен заметок, и тогда все эти заметки будут окрашены по-разному в соответствии с тем, что я запросил через строку для каждой заметки. Итак, я пытаюсь создать компонент, который поможет мне избежать создания буквально тысяч изображений клавиатуры для каждого возможного состояния, в котором может быть клавиатура пианино.
В стилизованном компоненте, который принадлежит основному * Компонент 1006 * Я передаю ему опору и пытаюсь условно изменить цвет фона, если существует элемент массива, например:
const C1 = styled.div`
${WhiteKey}
${props =>
// tried this:
props.notes.contains('cp') ? css`${PerfectKey}` :
// and this:
(props.notes.contains('cp')) ? css`${PerfectKey}` :
css`${UnselectedWhiteKey}`
}
`
..., который затем используется в функциональном компоненте реагирования в тот же файл, например так:
const Keyboard = (props) => {
return (
<Container>
<KeyboardBox>
<WhiteKeys>
<C1 {...props}></C1>
<D1 {...props}></D1>
<E1 {...props}></E1>
<F1 {...props}></F1>
<G1 {...props}></G1>
<A1 {...props}></A1>
<B1 {...props}></B1>
</WhiteKeys>
<BlackKeys>
<Db1 {...props}></Db1>
<Eb1 {...props}></Eb1>
<Gb1 {...props}></Gb1>
<Ab1 {...props}></Ab1>
<Bb1 {...props}></Bb1>
</BlackKeys>
</KeyboardBox>
</Container>
)
}
... где каждая заметка - это собственный стиль-компонент, который пытается заглянуть в массив в свой родительский компонент и решить, нужно ли ему что-то делать или нет.
... но на странице появляется следующее сообщение об ошибке:
TypeError: Cannot read property 'contains' of undefined
Я тоже попробовал indexOf, и то же самое произошло.
Я также пытался преобразовать массив в строку, например так:
<Keyboard scale={'cp dma ema fp gp ama bma'}/>
... и затем с помощью props.scale.includes('cp'), но снова то же сообщение об ошибке?
Что я делать неправильно и там есть более правильный и лучший способ go об условном изменении атрибутов css на основе части значения реквизита, а не всего значения?
Или это ошибка, и эти методы массива должны работать, или это нехватка функции, которую я считаю очень полезной? Я лично не знаю, поэтому, пожалуйста, помогите, если это возможно. Если я смогу сделать эту работу, то я действительно буду очень счастлив: -)
вот минимальное воспроизведение в песочнице кода ... пытаясь сделать его более минимальным, но это нечто:
https://codesandbox.io/s/keyboard-3u6ci