如何在 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() 命令的一部分，没有任何内容被打印出来，我不确定反应实际上发生了什么，或者我错过了一些东西。这可能是一个非常简单的问题，但作为 React 的新手我无法调试。

Answer 1

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

Answer 2

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

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