react组件穿梭框

App.js

import React, { useState } from 'react';
import { Transfer } from 'antd';
import "../src/App.css"
const data = [
  {
    key: '1',
    title: 'python',
  },
  {
    key: '2',
    title: 'django',
  },
  {
    key: '3',
    title: 'Vue',
  },
  {
    key: '4',
    title: 'React',
  },
  {
    key: '5',
    title: 'Redux',
  },
  {
    key: '6',
    title: 'React-router',
  },
  {
    key: '7',
    title: 'HTML',
  },
  {
    key: '8',
    title: 'CSS',
  },
];

const TransferComponent = () => {
  const [targetKeys, setTargetKeys] = useState([]);

  const handleChange = (newTargetKeys) => {
    setTargetKeys(newTargetKeys);
  };

  return (
    <div className='tran'>
    <Transfer className='tent'
    // style={{width:"500px",height:"500px" }}
      dataSource={data}
      targetKeys={targetKeys}
      onChange={handleChange}
      render={(item) => item.title}
    />
    </div>
  );
};

export default TransferComponent;

App.css

*{
  margin: 0;
  padding: 0;
}
.tran{
  width: 500px;
  height: 500px;
  background-color: rgb(74, 105, 105);
  margin: 0 auto;
}
.tent{
  padding-top: 50px;
  margin-left: 50px;
}