javascript - 在样式化组件中搜索反应道具时，我可以使用 .includes() 或 .contains() 或 .indexOf() 吗？

问题描述

我有一个带有包含字符串数组的道具的反应组件实例，如下所示：

<Keyboard notes={['cp', 'dma', 'ema', 'fp', 'gp', 'ama', 'bma']}/>

该组件的目的是创建一个钢琴键盘并在我正在构建的应用程序中的任何位置调用它，传入一组音符名称，然后根据我通过字符串请求的内容，所有这些音符的颜色都不同对于每个音符。因此，我正在尝试创建一个组件，以帮助我避免为钢琴键盘可能处于的每种可能状态制作数以千计的键盘图像。

在属于主Keyboard组件的样式化组件中，我将道具传递给它并尝试在存在数组元素时有条件地更改背景颜色，如下所示：

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')相同的错误消息？

我做错了什么，有没有更正确和更好的方法来根据道具的部分价值而不是整个价值有条件地改变css属性？

或者这是一个错误，这些数组方法应该可以工作，还是缺少我认为非常有用的功能？我个人不知道，所以如果可能，请帮助。如果我能完成这项工作，那么我真的会很高兴:-)

这是代码沙箱中的最小复制...试图使其更小，但它是这样的：

https://codesandbox.io/s/keyboard-3u6ci

标签： javascriptreactjsstyled-components

javascript - 在样式化组件中搜索反应道具时，我可以使用 .includes() 或 .contains() 或 .indexOf() 吗？

问题描述

解决方案

推荐阅读