{"title":"Support Virtual List","meta":{"title":"Support Virtual List","description":"\n

You can enable virtual list by set userVirtual to ture

\n","order":"7"},"codes":{"jsx":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Transfer } from '@alifd/next';\nconst dataSource = (() => {\n const dataSource2 = [];\n for (let i = 0; i < 1e3; i++) {\n dataSource2.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0,\n });\n }\n return dataSource2;\n})();\nclass Demo extends React.Component {\n constructor() {\n super(...arguments);\n this.handleChange = (value, data, extra) => {\n console.log(value, data, extra);\n };\n }\n render() {\n return (\n \n );\n }\n}\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Transfer } from '@alifd/next';\nconst dataSource = (() => {\n const dataSource2 = [];\n for (let i = 0; i < 1e3; i++) {\n dataSource2.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0,\n });\n }\n return dataSource2;\n})();\nclass Demo extends React.Component {\n constructor() {\n super(...arguments);\n this.handleChange = (value, data, extra) => {\n console.log(value, data, extra);\n };\n }\n render() {\n return (\n \n );\n }\n}\nReactDOM.render(, mountNode);\n\n````","name":"virtualListEnUs","html":"
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Transfer } from '@alifd/next';\nconst dataSource = (() => {\n  const dataSource2 = [];\n  for (let i = 0; i < 1e3; i++) {\n    dataSource2.push({\n      label: `content${i}`,\n      value: `${i}`,\n      disabled: i % 4 === 0,\n    });\n  }\n  return dataSource2;\n})();\nclass Demo extends React.Component {\n  constructor() {\n    super(...arguments);\n    this.handleChange = (value, data, extra) => {\n      console.log(value, data, extra);\n    };\n  }\n  render() {\n    return (\n      <Transfer\n        mode=\"simple\"\n        useVirtual\n        defaultValue={['3']}\n        dataSource={dataSource}\n        defaultLeftChecked={['1']}\n        onChange={this.handleChange}\n        titles={['Simple Mode', 'Simple Mode']}\n      />\n    );\n  }\n}\nReactDOM.render(<Demo />, mountNode);\n
","renderScript":""}