Question

这是React代码：

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);

我对这个特定元素有疑问：

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

数据显示为文本，但如何在该特定情况下将html添加到此JSX以获取链接

不是文本黑客：

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。使用Lorem Ipsum的关键在于它具有或多或少的正常字母分布......

Answer 1

您似乎可以使用Cell property来显示自定义标记：

{
    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>
},

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

1 个答案: