Reactjs 在React中动态更改包装器标记

我想更改内容的包装标签。目前我是这样做的：

{!filter && <Styled.DropdownMenu>
    {Options}
</Styled.DropdownMenu>}
{filter && <Dropdown.Menu as={CustomMenu}>
   {Options}
</Dropdown.Menu>}

{！过滤器&&
{Options}
}
{过滤器&&
{Options}
}

---

这很有效。但是由于内容

选项

总是相同的。我想知道是否有一种方法可以在不重复

{Options}

的代码的情况下动态地更改同一行中的包装器标记。您可以使用以下方法，而不是多个！过滤检查

filter ? <Styled.DropdownMenu>{Options}</Styled.DropdownMenu> 
: (<Dropdown.Menu as={CustomMenu}>
       {Options}
    </Dropdown.Menu>)

过滤器？{Options}
: (
{Options}
)

或者，您可以创建单独的组件并按如下方式使用

filter ? <StyledDropDownComponent options={Options} /> : <DropDownComponent options={Options} /> 

过滤器？：

这会使您的代码更干净。

试试这种方法

const TAG = !filter ? Styled.DropdownMenu : Dropdown.Menu;

const customMenuData = !filter ? {} : {CustomMenu};

<TAG as={customMenuData}>{Options}</TAG>

const标记=！过滤器？Styled.DropdownMenu:Dropdown.Menu；
const customMenuData=！过滤器？{}:{CustomMenu}；
{Options}

如何将

as={CustomMenu}

传递到下拉菜单。然后是菜单？