Reactjs 스타일 구성 요소와 document.getElementById

Question

안녕하세요, 나는 같은 ID로 항목을 강조 표시하려고합니다. 나는 document.getElementById를 사용하지만 실제로 그것을 할 ho 모르겠다. 누구든지 나를 도울 수 있니? 내 데이터베이스에서 객체의 배열을 통해 반복하고있어 ....

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

.... 내 Google지도 구성 요소 :

<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를 사용하면 구성 요소가 동적으로 제어 할 수 있습니다. 따라서 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} 
     /> 
    ) 
    } 
}