阵营从列表

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