在 Reactstrap 中使用按钮组作为下拉项时出错

Question

我需要一个 ButtonGroup 作为 DropdownItem。

 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem toggle={false}>
            <ButtonGroup>
               <Button>Right</Button>
               <Button>Right</Button>
            </ButtonGroup>
          </DropdownItem>
        </DropdownMenu>
 </Dropdown>

我收到警告：

warning.js:33 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

如何解决这个问题？

Answer 1

您不能在按钮内呈现按钮。也就是说，DropdownItem 组件默认有一个 "button" 的标签属性，这意味着它将呈现一个按钮。例如，如果您将 DropdownItem 上的属性更改为 tag="h1"，它会呈现一个 h1 而不会出现此错误。希望我清楚。

在 Reactstrap 中使用按钮组作为下拉项时出错

Error using buttongroup as dropdownitem in Reactstrap

reactjs

reactstrap