如何在 react-bootstrap 组件中使用“as”道具（elementType）？答案

【问题标题】：How to use 'as' props (elementType) in react-bootstrap Components?如何在 react-bootstrap 组件中使用“as”道具（elementType）？
【发布时间】：2020-11-06 02:21:02
【问题描述】：

在 react-bootstrap 文档中，每个具有 type elementType 的组件的 API 中都有 'as' 属性。我不知道如何在组件中使用它。我尝试将 React 组件和 "<div>test</div>" 作为“as”道具传递，但没有奏效。我试图搜索任何示例或实现，但找不到任何示例或实现。谢谢。

【问题讨论】：

你需要告诉它使用什么元素，而不是元素应该如何显示。 as="div"
谢谢！现在描述是有道理的。

标签： reactjs react-bootstrap

【解决方案1】：

您正在传递将使用 JSX 实例化的组件类型。内部看起来很相似

function Button(props) {
 const ComponentType = as;
 .......
  <ComponentType ......>

如您所知，如果它是带有本机元素标记名的字符串（"div"、"table" 等）或有效的 React 组件（继承的类 React.Component 或功能组件的函数），它将起作用

【讨论】：

【解决方案2】：

我需要这个来自定义导航组件的标签

     <Nav className='tabs-div' variant='tabs' >
        <Nav.Item  >
          <Nav.Link className='pending'  eventKey={-1}>Pending</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className='positive' eventKey={1}>Positive</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className='negative' eventKey={0}>Negative</Nav.Link>
        </Nav.Item>
      </Nav>

您可以从代码中了解到该选项卡将照常进行。但我需要另一个带有标签图标通知的服装......

所以我创建了一个这样的组件

import React from 'react'

class BtnPending extends React.Component{


    render(){
        return(
            <button className='btn btn-warning' >Pending</button> // this is just for the sake of demo
        )
    }
}


export default BtnPending;

Nav.Link 会改成这个

<Nav.Link as={()=>{return(<BtnPending/>)}} eventKey={-1}>Pending</Nav.Link>

对于 react-bootstrap 中的 Tab，您也可以使用参数标题

【讨论】：