react/antd中的抽屉不会在右侧打开，就在所有组件下方

Question

我希望在按下搜索按钮时，打开右侧的菜单，但它不遵守，它在表下方打开

<div className='container-fluid'>
<Drawer
title="Teste"
closable={true}
onClose={this.onClose}
visible={this.state.displayDiv}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
<div className='row' style={{ marginLeft: 30 }}>
<button class='btn btn-outline-success' type='button' onClick={this.changeDiv} style={{ marginLeft: 20, height: 40 }}>
Pesquisar
</button>
</div>
<table>
{...}
</table>
</div>

我正在使用样式和antd的引导程序作为组件

Answer 1

也有同样的问题。在调查过程中，我发现我还没有将我的antdcss导入到我的index.css文件中。

这是我的index.css文件：

@import '~antd/dist/antd.css';

body {
margin: 0;
font-family: 'Arimo', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

Answer 2

对于antd中的<Drawer>组件，可以传递placement这样的参数。

placement接受其中一个字符串参数：top | right | bottom | left。

在您的情况下，您需要将以下行添加到抽屉组件：placement={'right'}。

同样，您可能需要打开父组件中的抽屉，然后需要传递getContainer={false}。

你可以在这里看到官方的antd例子和你的问题的答案

提供了文档和更多示例