[英]Reactjs style component with document.getElementById
Hello i'm trying to highlight the Items, with the same Id. 您好,我正在尝试使用相同的ID突出显示项目。 Im using document.getElementById but i don't really know ho to do it. 我正在使用document.getElementById,但我真的不知道该怎么做。 does anyone can help me? 有人可以帮助我吗? I'm iterating over an Array of Objects from my Database.... 我正在遍历数据库中的对象数组。
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>
)
.... My GoogleMaps Component: ....我的GoogleMaps组件:
<Marker onClick={props.show}
position={{ lat: marker.latitude + 0.00201, lng:
marker.longitude + 0.00201}}
id={marker.id}
/>
id={marker.id} and cardId={card.id} are the same and i want to highlight one of them when hovering over them ... thanks in advance. id = {marker.id}和cardId = {card.id}是相同的,当我将鼠标悬停在它们上时,我想突出显示其中之一...预先感谢。
React gives you the ability for a component to control itself dynamically. React使您能够使组件动态地控制自身。 So make that Card
into a separate component with all of the logic you need using this.setState
to control the current style of your Card
. 因此,使用this.setState
来控制Card
的当前样式,使Card
成为具有所需逻辑的单独组件。 I can't test this, but this is the general idea: 我无法测试,但这是一般的想法:
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}
/>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.