使用ReactTable时，如何将该URL更改为该代码中的链接？

Question

Here is React code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactTable from 'react-table';
import _ from 'lodash';
import './style.css';

class GithubDataTable extends Component {
  render() {
    const { showData, savedData } = this.props;
    let data = null;

    if (showData === 'last') {
      data = _.last(savedData);
    } else {
      data = savedData[showData];
    }

    console.log(data);

    return (
      <div>
        {data && (
          <ReactTable
            data={data.items}
            columns={[
              {
                Header: 'Data from GitHub',
                columns: [
                  {
                    Header: 'Id',
                    id: 'id',
                    accessor: d => d.id,
                  },
                  {
                    Header: 'Repo Title',
                    id: 'repoTitle',
                    accessor: d => d.name,
                  },
                  {
                    Header: 'Owner',
                    id: 'owner',
                    accessor: d => d.owner.login,
                  },
                  {
                    Header: 'Link',
                    id: 'link',
                    accessor: d => d.html_url, // example data string "https://github.com/Michaelcj10/ReactJS-GitHub-User-Finder-App"
                  },
                  {
                    Header: 'Created at',
                    id: 'createdAt',
                    accessor: d => d.created_at.slice(0, 10),
                  },
                  {
                    Header: 'Updated at',
                    id: 'updatedAt',
                    accessor: d => d.updated_at.slice(0, 10),
                  },
                  {
                    Header: 'Stars',
                    id: 'stars',
                    accessor: d => d.stargazers_count,
                  },
                  {
                    Header: 'Forks',
                    id: 'forks',
                    accessor: d => d.forks_count,
                  },
                ],
              },
            ]}
            defaultPageSize={10}
            pageSizeOptions={[5, 10, 15, 20]}
            className="-striped -highlight"
          />
        )}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    savedData: state.savedData,
    showData: state.showData,
  };
}
export default connect(mapStateToProps, null)(GithubDataTable);

And I have problem with that particular element:

{
                    Header: 'Link',
                    id: 'link',
                    accessor: d => d.html_url, // https://github.com/Michaelcj10/ReactJS-GitHub-User-Finder-App
                  },

Data is shown as text, but how can I add html in that particular situation to this JSX to obtain a link

Not enought text hack:

---

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters...

Answer 1

Looks like you might be able to use the Cell property to display custom markup:

{
    Header: 'Link',
    id: 'link',
    accessor: d => d.html_url, // https://github.com/Michaelcj10/ReactJS-GitHub-User-Finder-App
    Cell: props => <a href={props.value}>{props.value}</a>
},