Форматировать строку из базы данных в URL-ссылку с помощью response, response-router, react- bootstrap -table - PullRequest
Новая
       53

Форматировать строку из базы данных в URL-ссылку с помощью response, response-router, react- bootstrap -table

0 голосов
/ 06 августа 2020

Итак, я использую response 16.13, response-router 5.2 и react- bootstrap -table 4.1.5. Я получаю элемент базы данных, который будет иметь базовый c URL (example.com) как часть возврата. Я использую функцию для форматирования URL-адреса для потребления в таблице response- bootstrap, используя его свойство dataFormat, и хочу иметь возможность щелкнуть его и перенаправить за пределы приложения. Дело в том, что я не могу заставить его работать.

Есть идеи, как я могу это сделать, потому что то, что у меня есть, не работает, и у меня нет идей.

Спасибо за любую помощь, которую вы можете предоставить.

TableHeaderColumn без dataFormat, это правильно извлекает данные из БД и просто представляет их в виде строки 

<TableHeaderColumn
                dataField="domain_url"
                dataSort
                dataFormat={dataFormat.urlFormatter}
              >

формат данных 

function urlFormatter(cell) {
  return (
    <div>
      <Route
        path="/external"
        component={() => {
          window.location = { cell };
          return null;
        }}
      />
    </div>
  );
}

1 Ответ

0 голосов
/ 06 августа 2020

форматирует URL-адрес для потребления в таблице response- bootstrap, используя свойство dataFormat, и вы хотите иметь возможность щелкнуть его и направить его за пределы приложения

Есть здесь нет необходимости использовать window.location. Вы можете отобразить тег привязки с URL, полученным с сервера, в качестве его атрибута href, так как вы «направляетесь за пределы приложения». 

function urlFormatter(cell) {
    return <a href={cell}>{cell}</a>;
}

Если вы выполняете маршрутизацию внутри приложения , вы можете изучить использование компонента Link из react-router-dom. Вы можете использовать тот же лог c, который я предоставил, но с Link вы должны использовать атрибут to для описания вашего маршрута

CodeSandBox: https://codesandbox.io/s/so-react-bootstrap-table-dataformat-6kew3

...