Javascript 带有document.getElementById的Reactjs样式组件

您好，我正在尝试突出显示具有相同Id的项目。我使用document.getElementById，但我真的不知道该怎么做。有人能帮我吗？ 我正在迭代数据库中的一组对象

return(
      <div className='list'>
      <Row>
      {this.state.cards.map((card) => {
        return(<Card 
          onHover={()=>{
            const highlighted =   document.getElementById(card.id)
            highlighted.style={{backgroundColor: "blue"}}
          }} 
          cardHeading={card.cardHeading} cardDesc={card.cardDesc}
           cardPreis={card.cardPreis} cardId={card.id} bewertung={card.cardBewertung}
           image={card.cardImage}/>)
          })
      }

      </Row>
      </div>
    )

返回(
{this.state.cards.map（（card）=>{
返回({
高亮显示的常量=document.getElementById（card.id）
突出显示的.style={{backgroundColor:“blue”}
}} 
cardHeading={card.cardHeading}cardDesc={card.cardDesc}
cardPreis={card.cardPreis}cardd={card.id}bewertung={card.cardBewertung}
image={card.cardImage}/>）
})
}
)

。。。。我的谷歌地图组件：

<Marker   onClick={props.show}
          position={{ lat: marker.latitude + 0.00201, lng: 
          marker.longitude + 0.00201}}
          id={marker.id}
          />

---

id={marker.id}和cardd={card.id}是相同的，我想在它们上方悬停时突出显示其中一个。。。提前感谢。

React为您提供了组件动态控制自身的能力。因此，使用

this.setState

来控制

卡的当前样式，将该
卡
与所需的所有逻辑组合成一个单独的组件。我无法对此进行测试，但这是总体思路：

return(
  <div className='list'>
    <Row>
      {this.state.cards.map((card) => <CustomCard card={card}/>)}
    </Row>
  </div>
)

class CustomCard extends Component {
  constructor() {
    super()
    this.state = {
      defaultColor: true
    }
  }

  handleClickColorChange() {
    this.setState({defaultColor: !this.state.defaultColor})
  }

  render() {
    const {card} = this.props
    const customStyle = {
      backgroundColor: 'blue'
    }

    return (
      <Card
        onHover={() => this.handleClickColorChange()}
        style={this.state.defaultColor ? null : customStyle}
        cardHeading={card.cardHeading} cardDesc={card.cardDesc}
        cardPreis={card.cardPreis} cardId={card.id} bewertung={card.cardBewertung}
        image={card.cardImage}
      />
   )
  }
}

返回(
{this.state.cards.map（（card）=>）}
)
类CustomCard扩展组件{
构造函数（）{
超级（）
此.state={
默认颜色：true
}
}
handleClickColorChange（）{
this.setState（{defaultColor:！this.state.defaultColor}）
}
render（）{
const{card}=this.props
常量自定义样式={
背景颜色：“蓝色”
}
返回(
this.handleClickColorChange（）}
style={this.state.defaultColor？null:customStyle}
cardHeading={card.cardHeading}cardDesc={card.cardDesc}
cardPreis={card.cardPreis}cardd={card.id}bewertung={card.cardBewertung}
image={card.cardImage}
/>
)
}
}