文章/答案/技术大牛

发布

社区首页 >问答首页 >在react中将链接作为dataFormatter返回时出现不变冲突错误

问在react中将链接作为dataFormatter返回时出现不变冲突错误
EN

Stack Overflow用户

提问于 2020-02-02 14:26:55

回答 2查看 45关注 0票数 0

在表列标题中，我想返回导航到每个标题的编辑模式的链接。我使用了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>
      )
  }

然后，我将该数据称为表中格式化的数据

<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调用中获得了这样的数据

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

javascript

reactjs

react-bootstrap-table

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-24 22:13:58

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

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

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

然后在Grid类中，我有一个函数

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

它也在Grid类的构造函数中注册

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

表列引用了this this函数

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

票数 0

Stack Overflow用户

发布于 2020-02-13 17:44:07

我不得不使用原始的html标签而不是链接才能正常工作。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60023753

复制

相似问题

问在react中将链接作为dataFormatter返回时出现不变冲突错误
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react中将链接作为dataFormatter返回时出现不变冲突错误EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react中将链接作为dataFormatter返回时出现不变冲突错误
EN