reactjs - 使用 React Table 库时，我可以呈现包含字符串和导入组件的列标题吗？

Question

是否可以将包含字符串和导入组件的列标题呈现为类似于下图的内容：

我已经导入了一个箭头排序图标，我想将它包含在字符串值（例如，位置、名字、姓氏等）旁边的某些标题中，以指示列是可排序的。以下代码是我尝试构建这样一个标头的方式：

{
    Header: `Location ${<ArrowSort />}`,
    accessor: 'location',
    disableFilters: true
}

我看到的不是所需的输出，而是“位置 [object Object] 作为列的标题。如果有人能解释我做错了什么并指出我正确的方向以生成所需的标题，我将不胜感激。

标签： reactjsreact-tablereact-table-v7

Answer 1

我能够通过如下重写我的 Header 参数来解决我的问题：

Header: () => (
  <div className="flex">
    <div className="inline-flex">Location</div>
    <div className="inline-flex">
      <ArrowSort />
    </div>
  </div>
),