javascript - 带有 document.getElementById 的 Reactjs 样式组件

Question

您好，我正在尝试突出显示具有相同 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>
    )

....我的 GoogleMaps 组件:

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

id={marker.id} 和 cardId={card.id} 是相同的，我想在将鼠标悬停在它们上面时突出显示其中一个 ...提前致谢。

Answer 1

React 为您提供了组件动态控制自身的能力。因此，使用 this.setState 控制 Card 的当前样式，将 Card 变成一个包含您需要的所有逻辑的单独组件。我无法对此进行测试，但这是总体思路:

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}
      />
   )
  }
}