Antd 穿梭框（Transfer）内部为树结构 动态数据的使用方法

Antd 穿梭框（Transfer）内部为树结构 动态数据的使用方法

 <Transfer
          dataSource={
    
    transferDataSource} //所有节点（如果是树结构的也要遍历修改为list）
          targetKeys={
    
    targetKeys} //已经移动到右边的数据
          showSelectAll={
    
    false}
          selectAllLabels={
    
    null}
          className="tree-transfer"
          operations={
    
    ['添加','移除']}
          listStyle={
    
    {
    
    
            width: 300,
            height: 500,
          }}
          render={
    
    item => item.title}
          onChange={
    
    onchange} //这里才是重点 我们利用这个时间进行动态加载数据
        >
          {
    
    ({
    
     direction, onItemSelect, selectedKeys }) => {
    
    
            if (direction === 'left') {
    
    
              console.log(selectedKeys)
              const checkedKeys = [...selectedKeys, ...targetKeys];
              return (
                <OgrTree
                  transferDataSource={
    
    transferDataSource}
                  checkedKeys={
    
    checkedKeys}
                  onCheck={
    
    (_, {
    
     node: {
    
     key } }) => {
    
    
                    onItemSelect(key, !isChecked(checkedKeys, key));
                  }}
                />
              );
            }
          }}
        </Transfer>