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