Javascript 无法将FixedSizeList（反应窗口）组件与antd传输组件集成

antd是一个很棒的组件库，但是在集成react窗口和Transfer组件时，我面临一些挑战

我试图在传输组件中呈现一个巨大的列表，由于Antd3.x传输组件会随着项目长度的增加而滞后，因此我考虑将react窗口组件与传输组件一起使用

在链接中：

我正在尝试将react窗口与传输组件集成，但无法设置antd传输组件中可用的一些默认行为。 要查看antd组件的默认行为，我们可以在代码库中将perfMode设置为false进行检查

将FixedSizeList组件与Transfer组件一起使用时，selectAll等一些基本功能不起作用

任何能为我指明正确方向的帮助都将不胜感激

复制步骤：-

拜访

要启用虚拟化，请转到index.js的第126行并将perfMode设置为true

选择一些元素并单击右箭头

选定的元素将移动到右侧存储桶，但不会取消选中

---

您似乎无法传递选定的键

请查看以下完全有效的解决方案：

const { Transfer } = antd;
const ReactDragListView = window["react-drag-listview"];

const dataSource = [];
for (let i = 0; i < 20; i++) {
  dataSource.push({
    key: i.toString(),
    title: `Item ${i + 1}`
  });
}

const targetKeys = dataSource
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);

class TransferDemo extends React.Component {
  state = {
    targetKeys,
    selectedKeys: []
  };

  handleChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({
      selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]
    });
  };

  getDragProps = () => ({
    onDragEnd: (fromIndex, toIndex) => {
      const targetKeys = [...this.state.targetKeys];
      const item = targetKeys.splice(fromIndex, 1)[0];
      targetKeys.splice(toIndex, 0, item);

      this.handleChange(targetKeys);
    },
    nodeSelector: ".ant-transfer-list:last-child .ant-transfer-list-content > div"
  });

  render() {
    const { targetKeys, selectedKeys } = this.state;

    return (
      <div>
        <ReactDragListView {...this.getDragProps()}>
          <Transfer
            dataSource={dataSource}
            titles={["Source", "Target"]}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleChange}
            onSelectChange={this.handleSelectChange}
            render={item => item.title}
            listStyle={{ height: 300 }}
          />
        </ReactDragListView>
      </div>
    );
  }
}

ReactDOM.render(
  <TransferDemo />,
  document.getElementById('root')
);

const{Transfer}=antd；
const ReactDragListView=窗口[“react DRAGLISTVIEW”]；
常量数据源=[]；
for（设i=0；i<20；i++）{
dataSource.push({
键：i.toString（），
标题：`项目${i+1}`
});
}
const targetKeys=数据源
.filter（项=>+项.key%3>1）
.map（item=>item.key）；
类TransferDemo扩展了React.Component{
状态={
目标键，
选择键：[]
};
handleChange=nextTargetKeys=>{
this.setState（{targetKeys:nextTargetKeys}）；
};
handleSelectChange=（sourceSelectedKeys、targetSelectedKeys）=>{
这是我的国家({
selectedKeys:[…sourceSelectedKeys，…targetSelectedKeys]
});
};
getDragProps=（）=>({
onDragEnd：（从索引到索引）=>{
const targetKeys=[…this.state.targetKeys]；
const item=targetKeys.拼接（fromIndex，1）[0]；
目标键拼接（toIndex，0，项目）；
此.handleChange（目标键）；
},
节点选择器：“.ant传输列表：最后一个子级.ant传输列表内容>div”
});
render（）{
const{targetKeys，selectedKeys}=this.state；
返回(
项目名称}
listStyle={{height:300}}
/>
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

为你介绍一家公司也是如此

---

祝你好运

谢谢你，詹姆斯。这支钢笔看起来很干净。是否可以添加react窗口，以便它可以处理巨大的数据集，例如源代码部分中的30k项。是的，当然可以。实际上它是用react写的。对于庞大的数据集，我不知道，因为它是由antd提供的。可能会有很重的货物，以防万一。接受我的回答，如果它对你的情况很好，那就太好了。谢谢