根據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應用更改

回答

相關問題