尝试通过样式按钮基于用户输入来更改a的grid-column值styled.div。我将grid-column值设置为样式组件中的props，如下所示：
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>
...但是它还不起作用，所以我没有做正确的事，或者我错过了一些事，但是我不知道我做错了什么。
key是ReactJS中的隐式道具。从文档：
密钥是React的提示，但不会传递给您的组件。如果在组件中需要相同的值，则将其作为道具以不同的名称显式传递
因此，要传递道具，您需要使用的其他名称，key并且您应该可以使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句