陣營從列表

Question

漂亮的新刪除組件反應，從淘汰賽

下面是我的問題 的簡化例子，我有項目，我需要根據其到期刪除的項目列表的情況來日期

下面

項是一個對象

的陣列每個對象都包含一個名稱和到期日期

class List extends Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      items: prop.items 
     } 
    } 

componentDidMount(){ 
    window.setInterval(function(){ 


    }.bind(this), 5000); 
} 

    render() { 
     return <div> 
       {this.state.items.map(function(item, index){ 
        return <ListItem key={index} {...item} /> 
       }.bind(this))} 
     </div> 
    } 
} 

class ListItem extends Component{ 
    expired(){ 
     return new Date() > new Date(this.props.expiration) 
    } 
    render(){ 
     return <div> 
      <span>Name {this.props.name}</span> 
     </div> 
    } 
} 

我正在考慮運行間隔並檢查ListItem是否已過期。 理想情況下，我想從列表組件中的每個ListItems調用過期的函數

我已閱讀關於refs，但它似乎只是一個黑客。

是否沒有其他方式讓List組件擁有實際實例列表，以便它可以調用子組件上的任何方法？

問候

Answer 1

在ReactJS，您可以運行JS基本上是隻要你想，包括render()方法。那麼爲什麼不在渲染所需內容之前檢查expiration道具？現在每個List呈現時，每個ListItem也將重新渲染（）和運行檢查：

ListItem.jsx

render() { 

    const { expiration, name} = this.props; 

    if (expired(expiration)) { 
     return <span /> 
    } 

    return (
     <div> 
      <span>Name: {name}</span> 
     </div> 
    ) 

} 

expired(date) { 
    return new Date() > new Date(date) 
}