Проблемы с передачей динамической ссылки на таблицу

Я использую здесь react-bootstrap-table, но любой другой вариант хорош. У меня большая проблема со вставкой ссылки на таблицу. Я пробовал почти все. Я получаю данные с сервера, поэтому я сопоставляю их и визуализирую результаты. Но мне нужно иметь возможность щелкнуть по одному из них, взять это значение и передать его второму компоненту. Я могу сделать это без использования таблиц react-bootstrap, но они мне очень нравятся, поэтому мне было интересно, возможно ли это, и если да, то не могли бы вы мне помочь. Вот важный фрагмент кода.

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>

reactjs react-redux react-router react-bootstrap-table
person Dzenis H.    schedule 12.04.2018    source источник
comment
Связанный stackoverflow.com/questions/47287855/   -  person Callat    schedule 12.04.2018
comment
Да, вы совершенно правы, но как я могу передать что-то вроде этого --› let test = sortedReports.map(item => { return (<Link to={{ pathname: '/reports/details', state: { item } }}> <PieChart size="21"/> </Link> ) }); ... в элемент <td>, сохраняя при этом возможность разбиения на страницы. Я могу сделать и то, и другое, но не то и другое. Ваше здоровье.   -  person Dzenis H.    schedule 12.04.2018
comment
Большой вопрос, как я могу передать <Link to={{ pathname: '/reports/details', state: { item } }} в таблицу с возможностью разбиения на страницы? Благодарим за обращение.   -  person Dzenis H.    schedule 12.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Решение было простым и довольно простым сейчас, но тогда оно вызывало у меня головную боль :)

Что я сделал, так это использовал библиотеку под названием 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>
            )});
person Dzenis H.    schedule 08.07.2018