React Bootstrap Table (Version2): Добавление HTML-кнопок

Question

я впервые использую React Bootstrap table версии 2, и я запускаю сборку CMS, и я планирую перечислить всю вставленную почту в таблицу данных.Я уже перечисляю все значения из базы данных.Однако проблема в том, как поместить кнопки в колонку действий. Я надеюсь, что кто-то может помочь мне закончить это.Спасибо ...

Проблема: относительно кнопок рендеринга внутри столбца Действие и почему функциональная кнопка не отображается внутри ячейки.

Моя цель: получить идентификатор каждого пользователя, и когда я нажму кнопку, будет перенаправлена ​​ссылка на другую страницу.

Моя функциональная кнопка:

 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
        }];

Мой рендер JSX:

<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>

Answer 1

Вы можете вернуть что угодно (строка / JSX) из атрибута formatter столбца.Чтобы показать кнопку, просто верните компонент button из функции formatter.

Посмотрите на изолированную программную среду кода, созданную специально для отображения кнопки ссылки в столбце здесь .