根据div ID应用更改

我有一个div映射，所以它会根据数据库发送的数据渲染任意次数。并在componentDidMount我收到一个ID。我想改变与我从componentDidMount得到的id相匹配的div的背景颜色我该怎么做？根据div 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，我想改变的背景色使用状态股利。

来源

2017-08-16 CraZyDroiD

只要使用正规的JS为目标的选择。 – TricksfortheWeb

你是否在同一个div中同时获得** id **。 – weBBer

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

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

更新

上面的方法直接操作DOM。让React处理实际的DOM操作是明智的，除非绝对必要。要让它再反应照顾，您可以更改在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; 
}

来源

2017-08-16 05:47:25 Dev

感谢它的工作！ – CraZyDroiD

@Dev我不认为修改DOM是React的一个好习惯，因为React的美妙之处在于将数据映射到UI，即您只需提供状态，React将找出如何呈现UI。通常，直接更改DOM会违反React的规则。只有在绝对必要时才应该直接触摸DOM。 – Guigui

@Dev如果将来'style'被更多的React逻辑控制，直接触摸dom会彻底搞乱逻辑。此外，React渲染基于DOM上的抽象层“虚拟DOM”，直接触摸DOM不需要 – Guigui

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

如何

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

来源

2017-08-16 06:13:06 Guigui

感谢它的工作！ – CraZyDroiD

@CraZyDroiD直接改变DOM绝不是一个好习惯。请考虑接受我的答案。 – Guigui

谢谢，我已经接受了另一个答案。我会upvote你的答案。 – CraZyDroiD

根据div ID应用更改

回答

相关问题