将动态链接传递到表时出现问题答案

【问题标题】：Problems passing a dynamic link to the table将动态链接传递到表时出现问题
【发布时间】：2018-09-22 23:22:40
【问题描述】：

我在这里使用 react-bootstrap-table，但其他所有选项都很划算。我在插入表的链接时遇到了一个大问题。我几乎尝试了一切。我从服务器获取数据，因此我正在对其进行映射并呈现结果。但是我需要能够单击其中一个并获取单击的值并将其传递给第二个组件。我可以在不使用 react-bootstrap-tables 的情况下做到这一点，但我非常喜欢它们，所以我想知道这是否有可能，如果有，请你帮帮我。这是一段重要的代码。

sortedReports 是一个数组。

let test = sortedReports.map(item => {
        return (<Link to={{ pathname: '/reports/details', state: { item } }}>
                    <PieChart size="21"/>
                </Link>
                )
        });

return (
        <div className="container">
        <div>
        <header style={{textAlign: 'center'}}>
            <h4>The complete list of reports</h4>
            <p style= {{ color: '#48C6EF' }}>Details available by clicking on an icon </p>
            </header>
            <hr />
        </div>

<div className="col-md-10">
        <BootstrapTable
          data={ sortedReports }
          pagination>
          <TableHeaderColumn dataField='year'>Year</TableHeaderColumn>
          <TableHeaderColumn dataFormat = { this.colFormatter} dataField='month'>Month</TableHeaderColumn>
          <TableHeaderColumn dataField='ukupno_plata'>Full salary</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_ukupno' isKey={true}>Full gross</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_plata'>Bruto</TableHeaderColumn>
          <TableHeaderColumn dataField='neto_plata'>Neto</TableHeaderColumn>          
          <TableHeaderColumn dataField='topli_obrok'>Neto</TableHeaderColumn>                    
          <TableHeaderColumn dataField='doprinosi'>Taxes</TableHeaderColumn> 
          <TableHeaderColumn **dataField={test}**>Details</TableHeaderColumn>

【问题讨论】：

相关stackoverflow.com/questions/47287855/…
是的，你是完全正确的，但是我怎样才能将这样的东西传递 --> let test = sortedReports.map(item => { return (<Link to={{ pathname: '/reports/details', state: { item } }}> <PieChart size="21"/> </Link> ) }); ... 到 <td> 元素，同时仍然具有分页能力。我可以做一个或另一个，但不能两者兼而有之。干杯。
最大的问题是，如何将<Link to={{ pathname: '/reports/details', state: { item } }} 传递到具有分页能力的表格中？感谢您与我们联系。

标签： reactjs react-router react-redux react-bootstrap-table

【解决方案1】：

现在解决方案很简单也很简单，但当时它让我很头疼:)

我所做的是，我使用了一个名为 react-feather 的库来显示图标，在其周围包裹了一个 <Link /> 标记，并传入相关数据以将其传递给下一个组件。在下一个组件中，我像这样访问它： const { data} = this.props.history.location.state;

const {yearsData, monthsData, netData, grossData, mealsData, taxData, handSalaryData, employeeNum} = this.state.currentSession;

    // Preparing the data for rendering
    const dataTable = yearsData
        .map((item, idx) => {
            let yearX = item;
            let monthX = monthsData[idx];
            let dev = {};
            data.relMonth = monthX;
            data.relYear = yearX;
            return (
                <tr key={yearX + monthX}>
                    <td>{item}</td>
                    <td>{monthsData[idx]}</td>
                    <td>{netData[idx]}</td>
                    <td>{grossData[idx]}</td>
                    <td>{mealsData[idx]}</td>
                    <td>{taxData[idx]}</td>
                    <td>{handSalaryData[idx]}</td>
                    <td>{employeeNum[idx]}</td>

                   // Here is where the 'magic' happens

                    <td className="table-actions">
                        <Link to={{ pathname: `/reports/details`, state: { data } }}>
                            <Activity size="20"/>
                        </Link>
                    </td>
                </tr>
            )});

【讨论】：