2

您好，我正在尝试突出显示具有相同 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}是相同的，我想在将鼠标悬停在它们上面时突出显示其中一个...在此先感谢。

4

1 回答 1

1

React 使您能够让组件动态控制自身。因此，将其制作Card成一个单独的组件，其中包含您需要this.setState用来控制当前样式的所有逻辑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}
      />
   )
  }
}
于 2017-11-27T12:04:27.950 回答