Reactjs React引导表（版本2）：添加Html按钮

这是我第一次使用React Bootstrap table Version 2，我正在开始构建CMS，我的计划是将所有插入的邮件列在数据表中。我已经列出了数据库中的所有值。然而，问题是如何将按钮放在“操作”列中。。我希望有人能帮我完成这件事。谢谢

问题：关于操作列中的渲染按钮，以及为什么功能按钮未显示在单元格内

我的目标是获取每个用户的ID，当我单击按钮时，它会将链接路由到另一个页面。

我的功能按钮：

 viewmail(cell, row){
    <Link to={"/view/mail/"+cell}><button className='btn btn-outline-primary btn lg'>Test</button></Link>    
 }

const options = {
        paginationSize: 5,
        pageStartIndex: 1,
        firstPageText: 'First',
        prePageText: 'Back',
        nextPageText: 'Next',
        lastPageText: 'Last',
        nextPageTitle: 'First page',
        prePageTitle: 'Pre page',
        firstPageTitle: 'Next page',
        lastPageTitle: 'Last page',
        showTotal: true,
        paginationTotalRenderer: customTotal,
        sizePerPageList: [{
          text: '2', value: 2
        }, {
          text: '5', value: 5

        // }, {
        //   text: 'All', value: this.state.unread_mail_api.length
        }] // A numeric array is also available. the purpose of above example is custom the text
      };





        const { SearchBar } = Search;

        const columns = [{
            dataField: 'id',
            text: 'Id',
            sort: true
            }, {
            dataField: 'fullname',
            text: 'Full Name'
            }, {
            dataField:'subject',
            text: 'Subject'

            } ,{
            dataField: 'id',
            text: 'Action',
            dataFormat:this.viewmail
        }];

<ToolkitProvider
keyField="id"
data={ this.state.unread_mail_api }
columns={ columns }

search
>
{
    props => (
    <div>
        <h3>Input something at below input field:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />
        <BootstrapTable
        { ...props.baseProps }
        pagination={ paginationFactory(options) }
        />
    </div>
    )
}
</ToolkitProvider>

我的渲染JSX:

 viewmail(cell, row){
    <Link to={"/view/mail/"+cell}><button className='btn btn-outline-primary btn lg'>Test</button></Link>    
 }

const options = {
        paginationSize: 5,
        pageStartIndex: 1,
        firstPageText: 'First',
        prePageText: 'Back',
        nextPageText: 'Next',
        lastPageText: 'Last',
        nextPageTitle: 'First page',
        prePageTitle: 'Pre page',
        firstPageTitle: 'Next page',
        lastPageTitle: 'Last page',
        showTotal: true,
        paginationTotalRenderer: customTotal,
        sizePerPageList: [{
          text: '2', value: 2
        }, {
          text: '5', value: 5

        // }, {
        //   text: 'All', value: this.state.unread_mail_api.length
        }] // A numeric array is also available. the purpose of above example is custom the text
      };





        const { SearchBar } = Search;

        const columns = [{
            dataField: 'id',
            text: 'Id',
            sort: true
            }, {
            dataField: 'fullname',
            text: 'Full Name'
            }, {
            dataField:'subject',
            text: 'Subject'

            } ,{
            dataField: 'id',
            text: 'Action',
            dataFormat:this.viewmail
        }];

<ToolkitProvider
keyField="id"
data={ this.state.unread_mail_api }
columns={ columns }

search
>
{
    props => (
    <div>
        <h3>Input something at below input field:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />
        <BootstrapTable
        { ...props.baseProps }
        pagination={ paginationFactory(options) }
        />
    </div>
    )
}
</ToolkitProvider>

{
道具=>(
在下面的输入字段中输入一些内容：

)
}
您可以从列的
格式化程序
属性返回任何内容（字符串/JSX）。
要显示按钮，只需从
格式化程序
函数返回
按钮
组件即可

看看专门为在列中显示链接按钮而创建的代码沙盒
 我通过在列中添加
formatter
字段来解决这类问题，如下所示

{
    dataField: 'link',
    text: 'ACTION',
    formatter: (rowContent, row) => {
      return (    
        <a href="#">Check</a>
      )
    }
}

{
数据字段：“链接”，
文本：“行动”，
格式化程序：（行内容，行）=>{
报税表（
)
}
}