Question

我有一个div映射，因此它会根据数据库发送的数据呈现任意次数。在componentDidMount我得到了一个身份证。我想改变div的背景颜色，它与我从componentDidMount得到的id相匹配我怎么能这样做？

我的代码

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

您可以简单地获取元素并更改其样式。

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;
}

Answer 2

this.props.voted_id内的componentDidMount基本上应该等于this.props.voted_id内的render。

怎么样

style={{backgroundColor:voted_id===contents.post_poll_content_id ? '#0b97c4' : 'white'}}

根据div id应用更改

2 个答案: