Question

React的新手，来自淘汰赛

以下是我的问题的简化示例我有一个项目列表的情况，我需要根据其到期日期删除项目

以下项目是一个对象数组

每个对象都包含名称和到期日期

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是否已过期。理想情况下，我想从List组件

中调用每个ListItem上的过期函数

我已经读过关于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)
}

从列表中反应删除组件

1 个答案: