Javascript 添加带有样式化组件的活动类不起作用

所以我的功能是：

function onClickChange(props) {
  let MyDiv = document.getElementById('myDIV')
  let InterfaceDesign = document.getElementById('interfaceDesign')
  if (MyDiv.style.display === 'none') {
    MyDiv.style.display = ''
    InterfaceDesign.classList.add('active')
  } else {
    MyDiv.style.display = 'none'
    InterfaceDesign.classList.remove('active')
  }
}

从DOM中的这个函数中，我可以看到它得到了活动类。但是从我的样式化组件：

const FirstDivElement = styled.div`
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #000;
  &:hover {
    background-color: #e6007e;
    transform: scale(1.05);
  }
  &:active{
    background-color: #e6007e;
  }
`

它没有获得&：活动的样式

我的div元素是：

<div id="interfaceDesign">
            <div onClick={onClickChange}>
              <ListItems
                headingText="Interface Design"
                backgroundImage={props.secondBackgroundImage}
              >
                <Img
                  style={{
                    height: '50px',
                    width: '50px',
                  }}
                  sizes={props.interfacedesign}
                />
              </ListItems>
            </div>
          </div>
          <div id="myDIV" style={{ display: 'none' }}>
            <InterfaceDesign
              secondBackgroundImage={props.secondBackgroundImage}
              interfacedesignMagenta={props.interfacedesignMagenta}
            />
          </div>
          </div>

---

有人能帮忙吗？提前感谢您：D

您可以在

FirstDivElement

中传递一个prop

active

，并更新

onClick

方法

这里有一个例子：

const FirstDivElement = styled.div`
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: ({ active }) => active ? #e6007e :#000;
    &:hover {
        background-color: #e6007e;
        transform: scale(1.05);
    }
    &:active{
        background-color: #e6007e;
    }
` 


onClickChange = () => {
    let MyDiv = document.getElementById('myDIV')
    this.setState({
       active: MyDiv.style.display === 'none' 
    })
}


render(){
    const { active } = this.state
    return(
        <div>
            <div onClick={onClickChange}>
                {/* content */}
            </div>
            <FirstDivElement active={active}>
                {/* content */}
                 <div id="myDIV" style={{ display: 'none' }}/>
            </FirstDivElement>
            <button onClick={this.onClickChange}> Click </button>
        </div> 
    )
} 

const FirstDivElement=styled.div`
位置：相对位置；
溢出：隐藏；
宽度：100%；
背景色：（{active}）=>active#e6007e:#000；
&：悬停{
背景色：#e6007e；
转换：标度（1.05）；
}
&：活动{
背景色：#e6007e；
}
` 
onClickChange=（）=>{
让MyDiv=document.getElementById（'MyDiv'）
这是我的国家({
活动：MyDiv.style.display==“无”
})
}
render（）{
const{active}=this.state
返回(
{/*内容*/}
{/*内容*/}
点击
)
} 

您正在为提供样式，该样式仅在激活元素时使用（例如，在鼠标单击期间）。您可能希望在样式化组件CSS中从

&:active

更改为

&.active

---

另外，您应该注意到，您通常会基于带有样式化组件的道具来更改样式。你可以做你正在做的事，但这并不常见

与您的问题无关，但您应该注意，使用DOM作为状态的源违反了React的工作方式（状态从父级流向子级，DOM由React处理）。