反應組件不更新

Question

export class Person extends Component{

constructor(props){
    super(props);
    this.state = {status:""};
}

componentDidMount(){
    /* get status from database */
    if (this.props.status === "online"){
        document.getElementById("dot").style.background = "green";
        this.setState({status:"online"});
    }
    else if(this.props.status === "offline"){
        document.getElementById("dot").style.background = "red";
        this.setState({status:"offline"});
    }
    else if(this.props.status === "away"){
        document.getElementById("dot").style.background = "yellow";
        this.setState({status:"away"});
    }
}

render(){
    return(
        <ListGroup.Item action variant="success" id="personLi" >
            <Row>
                <Col>
                    <Image id="avatar" src={Avatar} roundedCircle />
                </Col>
                <Col id="profileName">
                    {this.props.name}
                </Col>
                <Col>
                    <span id="dot"></span>
                </Col>
            </Row>
        </ListGroup.Item>
    )
}

}

這是我的人 class。 我正在嘗試創建一個朋友欄，其中包含一個朋友姓名列表，該列表將被渲染為具有狀態欄的組件，該狀態欄將根據他們是否在線（綠色）和離線（紅色）而改變顏色。 但是，當我嘗試在朋友欄中創建 Person 組件時，只有第一個組件的狀態欄顏色為綠色。 目前，我只想讓我的狀態以在線狀態開始，並傳遞給道具。

Answer 1

document.getElementById將在頁面上獲取該 ID 的第一個實例並更改樣式。 你可以用更 React-y 的方式來處理這個問題：

export class Person extends Component{
  render(){
    let color = 'green';
    if(this.props.status === 'offline'){
      color = 'red';
    } else if (this.props.status === 'away') {
      color = 'yellow';
    }

    return(
      <ListGroup.Item action variant="success" id="personLi" >
        <Row>
          <Col>
            <Image id="avatar" src={Avatar} roundedCircle />
          </Col>
          <Col id="profileName">
            {this.props.name}
          </Col>
          <Col>
            <span style={{ backgroundColor: color }} />
          </Col>
        </Row>
      </ListGroup.Item>
    );
  }
}

Answer 2

混淆事物不是一個好主意。 為什么將 DOM API 與 React 一起使用？

為什么不想使用虛擬 DOM？ 並且將 props 直接復制到組件的 state 是一種反模式。

export class Person extends Component{

constructor(props){
    super(props);
    this.state = {status:""};
}

componentDidMount(){
    fetchState().then((status) => this.setState({status}));
}

getStatusColor() {
    switch(this.state.status) {
        case "offline": return "red";
        case "online": return "green";
        case "away": return "yellow";
    }
}

render() {
    return (
        <ListGroup.Item action variant="success" id="personLi" >
            <Row>
                <Col>
                    <Image id="avatar" src={Avatar} roundedCircle />
                </Col>
                <Col id="profileName">
                    {this.props.name}
                </Col>
                <Col>
                    <span style={{backgroundColor: this.getStatusColor()}}></span>
                </Col>
            </Row>
        </ListGroup.Item>
    )
}