javascript - 根据 div id 应用更改

Question

我映射了一个 div，因此它可以根据从数据库发送的数据呈现任意次数。在 componentDidMount 上我得到了一个 id。我想更改与我从 componentDidMount 获取的 id 相匹配的 div 的背景颜色，我该怎么做？

我的代码

componentDidMount() {

        alert(this.props.voted_id);
}

render() {

        let {contents, submitvote, postId, voted_id} = this.props

        return (

            <div className="txt_vote_bar_div" id={contents.post_poll_content_id} style={{backgroundColor: this.state.vote_status ? '#0b97c4' : 'white'}}>
                <p className="txt_vote_choice" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}
                   onClick={() => {
                       this.handleClick(contents.post_poll_content_id);

                   }}> {contents.content} </p>
                <p className="txt_tot_votes"
                   style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}> {contents.votes}%
                    (Votes:)</p>
            </div>
        );
    };

基本上我想做的是，如果 this.props.voted_id 匹配 contents.post_poll_content_id ，我想使用状态更改该 div 的背景颜色。

Answer 1

You can simply get the element and change its style.

componentDidMount() {
  let el = document.getElementById(this.props.voted_id);
  if(el) {
     el.style.backgroundColor = "blue";
  }
} 

更新

上述方法直接操作 DOM。除非绝对必要，否则让 React 处理实际的 DOM 操作是明智的。 为了让 React 负责，您可以在 JSX 中进行更改:

<div className= {voted_id===content.post_poll_content_id ? "txt_vote_bar_div active" :  "txt_vote_bar_div"} id={content.post_poll_content_id} >

/CSS
.active {
  background-color:#0b97c4;
}