visible 已弃用 其他方法实现纵向滚动条
时间: 2024-02-23 22:03:17 浏览: 23
你可以使用`getContainer`属性来指定Modal组件挂载的容器元素,并在该容器元素上设置样式来实现纵向滚动条的效果。
具体实现步骤如下:
1. 创建一个容器元素,例如使用`<div>`元素,并设置其高度。
2. 使用`ReactDOM.createPortal`方法将Modal组件渲染到该容器元素中,同时在Modal组件中设置`getContainer`属性,将其指定为该容器元素。
3. 在该容器元素上设置样式,例如设置`overflow-y: scroll`。
示例代码如下:
```jsx
import { Modal } from 'antd';
import ReactDOM from 'react-dom';
const container = document.createElement('div');
container.style.height = '500px';
document.body.appendChild(container);
function MyModal() {
const [visible, setVisible] = useState(true);
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return ReactDOM.createPortal(
<Modal
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
getContainer={() => container}
>
{/* Modal内容 */}
</Modal>,
container,
);
}
```
在上述代码中,我们创建了一个`<div>`元素作为容器元素,并设置其高度为`500px`。然后,使用`createPortal`方法将Modal组件渲染到该容器元素中,并将`getContainer`属性设置为一个回调函数,该回调函数返回该容器元素。最后,在该容器元素上设置样式,使其出现纵向滚动条。