在反应中返回 Link 作为 dataFormatter 时的不变冲突错误

Question

在 table 列标题中，我想 return 链接导航到每个标题的编辑模式。我正在使用 react-bootstrap-table 并在我的组件

的构造函数中创建了一个自定义数据格式化程序

class Grid extends Component {
  constructor(props) {
    super(props);
    this.anchorFormatter = (cell, row, slug) => {
      let link = "/"+slug;
      return (
        <Link to={link}>
          {cell}
        </Link>
      )
  }

然后我将此数据格式化为 table

<TableHeaderColumn isKey dataField="title" dataSort dataFormat={ this.anchorFormatter }>Title</TableHeaderColumn>

这是得到这个错误

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `TableBody`.

第二部分是如何将 slug 的值传递给数据格式化程序？我从 get 请求中得到这样的数据 API Call

{
  "title": "Experiments in DataOps",
  "status": true,
  "publish_date": "2020-01-29",
  "slug": "experiments-in-dataops"
},

Answer 1

我必须使用原始 html 标签而不是 link 才能工作，即

const anchorFormat = (cell,row) => {
  let link = '#/blogs/' + row.slug;
  return ( <div><a className="nav-link" href={link}>{cell}</a></div>);
}

Answer 2

另一种方法是创建一个class或函数，然后将其作为组件使用，这里我创建组件

class BlogAnchor extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Link to={this.props.link}>&nbsp;{this.props.linkText}&nbsp;</Link>
        );
    }
}

然后在网格中 class 我有一个函数

anchorFormatter(cell, row) {
    let link = "blogs/" + row.slug;
    return <BlogAnchor link={link} linkText={cell} />;
}

也注册在Grid的构造函数中class

this.anchorFormatter = this.anchorFormatter.bind(this);

而table列指的是这个函数

<TableHeaderColumn isKey dataField="title" dataSort dataFormat {this.anchorFormatter}>Title</TableHeaderColumn>

在反应中返回 Link 作为 dataFormatter 时的不变冲突错误

Invariant Violation error when returning a Link as dataFormatter in react

javascript

reactjs

react-bootstrap-table