如何在 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

我使用弹出的概念解决了它。 制作一个组件并根据事件触发器切换它的显示