Javascript 在react中将链接作为dataFormatter返回时发生不变冲突错误

在表格列标题中，我想返回导航到每个标题的编辑模式的链接。我正在使用react引导表，并在组件的构造函数中创建了一个自定义数据格式化程序

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

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

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

第二部分是如何将slug的值传递给数据格式化程序？我从get request API调用中获得这样的数据

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

---

我必须使用原始的html标签，而不是链接，这样才能工作

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

const-anchorFormat=（单元格，行）=>{
让link='#/blogs/'+row.slug；
返回（）；
}

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

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

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

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

表列引用了这个函数

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

标题

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

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