使用react-virtualized时下拉选项的勾选/单选框子组件无法渲染

1. 组件命名规范错误 #

你提供的DropdownOptionMolecule代码里用了小写的<dropdown-option-molecule>标签，React要求自定义组件必须大写字母开头，否则会被识别为原生HTML元素，内部的TickboxTextMolecule和RadioboxTextMolecule无法被正确解析渲染。

修复：
把组件标签改为大写开头：

<DropdownOptionMolecule onClick={handleOptionClick}>
  {label}
  {type === DropdownTypes.MULTI && (
    <TickboxTextMolecule description={description} checked={checked} id={id} onChange={onChange}>
      {label}
    </TickboxTextMolecule>
  )}
  {type === DropdownTypes.SINGLE && (
    <RadioboxTextMolecule
      label={label}
      description={description}
      checked={checked}
      id={id}
      onChange={onChange}
      type={radioBoxTypes.SELECT}
    />
  )}
</DropdownOptionMolecule>

2. type属性传递异常 #

父组件中DropdownOptionMolecule的type用了this.type，但你没在组件里初始化或传入这个值，导致type === DropdownTypes.MULTI/SINGLE的判断不成立，对应的勾选框组件自然不会渲染。

修复：

• 如果type是从父组件props传入，直接用props.type：

  // rowRenderer方法内
  <DropdownOptionMolecule
    description={description}
    checked={checked}
    label={label}
    key={index}
    onChange={this.onOptionChange}
    id={id}
    type={this.props.type} // 替换为props.type
    onLoad={measure}
  />
  

• 或者在constructor里初始化：

  constructor(props) {
    super(props);
    this.type = props.type; // 新增该行
    this.cache = new CellMeasurerCache({
      defaultHeight: 24,
      fixedWidth: true,
    });
    this.rowRenderer = this.rowRenderer.bind(this);
  }
  

3. 拼写错误修正（间接影响） #

AutoSizer的回调参数拼写错误：hegiht → height，虽然不是组件不渲染的直接原因，但会导致List高度计算异常，建议修复：

<AutoSizer>
  {({ width, height }) => ( // 修正拼写
    <List
      width={width} // 建议用AutoSizer返回的width，而非固定值
      height={height} // 同理用返回的height
      rowCount={options.length}
      rowHeight={this.cache.rowHeight}
      rowRenderer={this.measureRowRenderer(options)}
      data={options}
      deferredMeasurementCache={this.cache}
      ref={(listComponent) => (this.listComponent = listComponent)}
    />
  )}
</AutoSizer>

4. 常量匹配校验 #

确认DropdownTypes.MULTI和DropdownTypes.SINGLE的取值与传入的type完全匹配，比如避免字符串/数字类型不匹配导致判断失效。

5. 测量回调触发 #

确保DropdownOptionMolecule正确调用onLoad传递的measure方法，让CellMeasurer能计算行高，避免组件因行高不足被截断：
如果是函数组件：

// DropdownOptionMolecule内部
useEffect(() => {
  onLoad?.();
}, [onLoad]);

如果是类组件：

componentDidMount() {
  this.props.onLoad?.();
}

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