将反应组件（或元素？）放入对象中。

Question

我正在使用react-bootstrap-table-next（也称为react-bootstrap-table-2）在我的react网站上创建一个表格，并试图使图标组件作为数据而不是我的内容显示在行中现在有一个x，像这样：

我目前拥有的数据示例是：

const tools = [{key: 'Android Mobile', qual: "x"}]

但是我想做的是这样的：

const tools = [{key: 'Android Mobile', qual: <CheckIcon/>}]

其中CheckIcon为const CheckIcon = () => <Icon icon={check} size={10}/>（正在从react-icons-kit导入图标的位置）。

当前，当我执行类似的操作时，整个页面无法呈现，而且我还无法找到有关如何使用React将组件插入对象的更多信息。如果任何人有任何提示或技巧，将不胜感激！

Here is a stackblitz for anyone that wants to play around with the code

Answer 1

我认为column.formatter可以为您提供帮助。有一个在线演示：this

Answer 2

首先，确保react-bootstrap-table-next道具数据接受React组件。

到目前为止，我发现它不支持在数据对象内部渲染React Component。 https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/bootstrap-table.js#L118

如果您想在https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/new上提交新功能，请随意

Answer 3

我最终得出了与@Roman Masyhar相同的结论，并暂时走了作弊者的路线，直到我最终只制作自己的桌子并只使用“✔”字符代替x并为其设置样式效果一样

万一有人好奇，我也打开了feature request here