如何在react-bootstrap-table 2列下的按钮中的react中的组件之间导航

问题描述

我正在使用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（）命令的一部分，没有打印任何内容 我不确定反应到底是怎么回事，或者我错过了什么。

这可能是一个非常简单的发现，但是作为新手，我无法调试。

请帮助。

谢谢...

解决方法

问题出在代码onClick = {() => <ExtendedView data={row} /> }

中

如果您想要将视图更改为ExtendedView，则必须使用一个库来控制不同的视图，因为React被设计为创建SPA。在这种情况下，我使用库react-router（https://reacttraining.com/react-router/web/example/basic）。易于使用，可以帮助您解决此问题

,

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