react-virtualized List组件rowRenderer内子组件更新失效问题

这个问题的核心原因正如你发现的——react-virtualized的组件默认是PureComponent，它们会通过浅比较props和state来决定是否重渲染。当你的子组件LeadItem内部维护状态（比如show属性）时，父组件的List和rowRenderer感知不到这个变化，所以对应的行不会触发重渲染，导致新结构无法显示。

下面是具体的解决方案，结合你的代码来调整：

1. 把子组件的状态提升到父组件 #

将LeadItem里控制显示/隐藏的show状态，迁移到父组件的leads数组中（或者单独维护一个记录行状态的对象）。这样状态变化会触发父组件更新，进而让rowRenderer拿到新的props，触发对应行的重渲染。

修改父组件的state初始化 #

假设你的leads数组每个元素是对象，给每个对象添加show字段，初始为false：

// 初始化示例
this.state = {
  leads: yourLeadData.map(lead => ({ ...lead, show: false })),
  deleted: []
};

添加状态更新方法 #

在父组件中写一个方法，用来切换指定行的show状态：

toggleLeadShow = (index) => {
  this.setState(prevState => {
    // 浅拷贝数组和对象，避免直接修改原state
    const updatedLeads = [...prevState.leads];
    updatedLeads[index] = { 
      ...updatedLeads[index], 
      show: !updatedLeads[index].show 
    };
    return { leads: updatedLeads };
  });
};

更新rowRenderer传递props #

在rowRenderer中，把当前行的show状态和切换方法传递给LeadItem：

rowRenderer(props) {
  let opacityvalue = 1;
  if (this.state.deleted.indexOf(props.index) >= 0) {
    opacityvalue = 0.3;
  }
  const currentLead = this.state.leads[props.index];
  return (
    <LeadItem 
      {...props} 
      lead={currentLead} 
      leadKey={props.index}
      show={currentLead.show}
      onToggleShow={() => this.toggleLeadShow(props.index)}
      // 保留你原来的其他props
    />
  );
}

2. 调整LeadItem的渲染逻辑 #

在LeadItem中，不再使用自身的state，而是直接使用父组件传递的show props来控制显示：

// LeadItem中的渲染部分
{this.props.show ? (
  <Selectize 
    queryfield={'tags'} 
    handleChange={(e) => this.props.updateLeadData(this.props.leadKey, 'tags', 'update', e)} 
    value={this.props.lead.tags} 
    create={false} 
    persist="false" 
    multiple 
    options={this.props.TAGS} 
  />
) : (
  <div>{taglist}</div>
)}

为什么这个方案有效？ #

当你点击按钮触发onToggleShow时，父组件的state.leads会更新，rowRenderer会接收到新的lead props。由于react-virtualized的List会检测到行props的变化，就会重新渲染对应的行，此时LeadItem就能根据新的show值渲染出输入框结构了。

额外提示：避免不必要的重渲染 #

• 确保你的LeadItem如果是PureComponent，传递的props都是可被浅比较的（比如不要传递匿名函数，除非用类组件的绑定方法或者函数组件的useCallback）
• 这种状态提升的方式是最优的，只会更新变化的行，比强制刷新整个List性能更好

内容的提问来源于stack exchange，提问作者elena