带有 document.getElementById 的 Reactjs 样式组件答案

【问题标题】：Reactjs style component with document.getElementById带有 document.getElementById 的 Reactjs 样式组件
【发布时间】：2018-05-10 14:24:36
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs google-maps ecmascript-6 react-google-maps

【解决方案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}
      />
   )
  }
}

【讨论】：