如何在 react-bootstrap-table 2 列下的按鈕中導航組件

Question

我正在使用 React Bootstrap 表 2 來顯示來自外部 API 的數據。 作為我表的一部分，我包含了一個虛擬列，它為每一行存儲一個按鈕，單擊時應該導航到帶有一些行信息的不同組件。

我的代碼中的列定義：

{
    dataField: 'expand',
    text: 'EXPAND',
    isDummyField:true,
    editable: false,
    formatter: (cell, row, rowIndex, formatExtraData) =>
    {
        return ( 
            <button
               type="button" 
               onClick = {() => <ExtendedView data={row} /> }
            >
                <img src = {expand} alt="expand"></img>
            </button>
         );
    },
    headerStyle: () => 
    {
        return { width: '50px', textAlign: 'center' };
    }
 }

按鈕單擊應重定向到的組件：

import React from 'react';

class ExtendedView extends React.Component
{
    constructor(props)
    {
        super(props)
        this.state = 
        {
            Id:0
        }
    }

    render()
    {

        console.log(this.props.data)
        console.log(this.state.Id)
        return(
            <div>
                <h1>{this.props.data}</h1>
            </div>
        );
    }

}

export default ExtendedView;

我沒有收到任何錯誤，也無法導航到子組件。 作為兩個 console.log() 命令的一部分，也沒有打印任何內容我不確定反應實際發生了什么，或者我錯過了一些東西。

這可能是一個非常簡單的問題，但作為一個新手，我無法調試。

請幫忙。

謝謝...

Answer 1

問題在於代碼onClick = {() => <ExtendedView data={row} /> }

如果您想要將視圖更改為 ExtendedView，那么您必須使用庫來控制不同的視圖，因為 React 旨在創建 SPA。 在這種情況下，我使用庫 react-router ( https://reacttraining.com/react-router/web/example/basic )。 易於使用，可以幫助您解決這個問題

Answer 2

我使用彈出的概念解決了它。 制作一個組件並根據事件觸發器切換它的顯示