Question

在我的React Redux应用程序中，我正在使用“ React-virtualized”渲染我的表（列：Image，Username，Time，status，Type），其中包含3000行。在渲染过程中要渲染的Data（对象）来自ajax调用的初始呈现（返回ID，Image，UserNmae，Time，状态，类型作为对象），但是必须根据接收到的更新任何特定行（1或多个）的参数的事件来更新表（如果需要）行），例如：对于行ID：500，状态从“就绪”更改为“等待”），我只想重新渲染该特定行（ID：500），而不是整个表。我该如何实现？我收到的事件为：eventObj = {“ id”：ID，“ status”：Wait} 在从ajax调用中接收数据时，我在渲染时将ID添加到了我的

中，以便当我接收到要更新的事件时，可以从ID的列表中找到该对象。我是React的新手，如果我的理解是正确的，只要状态发生变化，react就会重新呈现一切。任何线索/建议都将受到高度赞赏。

/* My rowRenderer Method*/
        rowRenderer = ({key, index, isScrolling, isVisible, style}) => {
        let obj = this.props.currentList[index];
        return (

<li key={key} style={style} id={obj.ID} ref={obj.ID}  >
                            <input type="checkbox" name="obj-list-index" id={"row-" + obj.ID} value={index}/>
                            <label for={"row-" + obj.ID} className="list-row">
                                <span className="user-icon">
                                    <i className={"job-row-img-default " +
                                    (this.fnGetobjImageType(obj.Name, obj.ID))}></i>
                            </span>
                                <span className="user-name">{this.fnGetUserName(obj)} </span>
                                <span className="time">{getTime(obj.DateTime)}</span>
                                <span className="status">{getStatus(obj.status)}</span>
                                <span className="type">{obj.type}</span>

                        </li> 

        render () {
        console.log("List:: render")
        return (
                <div id="content">
                            <li className="table-row">
                                <span className="user-icon">&nbsp;</span>
                                <span className="user-name >User Name</span>
                                <span className="time " >Date,Time</span>
                                <span className="status " >Status</span>
                                <span className="type ">Type</span>
                            </li>
                        </ul>
                        <div id="list-content"
                             className="table-scrollbar  up-arrow-notavailable down-arrow-notavailable">
                            <ul id="table-body" >
                                <List
                                        width={800}
                                        height={250}
                                        ref="list"
                                        className=""
                                        rowCount={this.props.total > 5 ? this.props.total : 5}
                                        rowHeight={35}
                                        overscanRowCount={2}
                                        rowRenderer={this.rowRenderer}
                                />
                            </ul>
                        </div>
                    </div>

                </div>
        )
    }

}

根据事件更新React Virtualized列表

0 个答案: