reactjs - 如何修复特定 div 中下拉组件的项目列表？

Question

我正在使用组件下拉菜单，当我单击图标时，我有选项列表，它是一个 div ms-layer，它在正文结束之前添加，当我单击下拉菜单以隐藏列表时它被删除的选项。

我想做的，就是把这个div ms'layer放到一个特定的div中，比如就在Dropdown的div之后，而不是body的末尾之前。

这是我的代码：

import * as React from 'react';
import {Dropdown, IDropdownOption} from 'office-ui-fabric-react/lib/Dropdown';

public render(): React.ReactElement<Props> {
return (
  <div>
          <Dropdown placeHolder={'Placeholder'} onChanged={this.handlefunction}
                    options={[
            {key: 'A', text: 'A'},
            {key: 'B', text: 'B'},
            {key: 'C', text: 'C'},]}/>
  </div>);
}

Answer 1

calloutProps 中有一个布尔值，可让您关闭该附加层，因此下拉菜单将呈现在 DOM 的同一区域。https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts#L147

import * as React from 'react';
import {Dropdown, IDropdownOption} from 'office-ui-fabric-react/lib/Dropdown';

public render(): React.ReactElement<Props> {
return (
  <div>
          <Dropdown calloutProps={{doNotLayer:true}} placeHolder={'Placeholder'} onChanged={this.handlefunction}
                    options={[
            {key: 'A', text: 'A'},
            {key: 'B', text: 'B'},
            {key: 'C', text: 'C'},]}/>
  </div>);
}