使用react-virtualized+react-rnd出现Rendered cell定位样式警告求解决

问题根源 #

react-virtualized的List2/Grid2组件要求rowRenderer返回的根元素必须接收传入的style参数——这个style包含虚拟列表定位所需的绝对位置、尺寸信息。你当前的代码用<React.Fragment>作为根元素，但Fragment不支持style属性，即便内部的<p>标签传了style，库也检测不到根元素的定位样式，因此抛出警告。

解决办法 #

把根元素替换为真实的DOM容器（比如<div>），并将style参数直接传给这个容器：

rowRenderer={({index, key, style}) => {
  const line = store.rightMessages[index];
  return (
    <div key={key} style={style}>
      <CopyToClipboard key={line.id} text={line.message} onCopy={handleCopy}>
        <p
          className={cx({
            [classes.line]: true,
          })}>
          {line.message}
        </p>
      </CopyToClipboard>
    </div>
  );
}}

额外说明 #

• 不需要再给内部的<p>标签传style，根容器的style已经能满足虚拟列表的定位需求
• 如果担心新增的<div>影响布局，可以给它添加类名，用CSS重置默认的margin、padding，或者设置box-sizing: border-box来避免布局偏移
• 若不想用<div>，也可以将<CopyToClipboard>作为根元素并传入style（前提是该组件会将style透传给它的外层包裹元素），但用<div>是最稳妥的方案

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