在reactjs中的reactable列内呈现两个或多个图标答案

【问题标题】：render two or more icons inside column of reactable in reactjs在reactjs中的reactable列内呈现两个或多个图标
【发布时间】：2016-09-05 23:28:54
【问题描述】：

我正在尝试在可反应列中添加两个或更多图标。

<Td column="conf" className="col-md-1">
    <span className="fa fa-trash"></span>
    <span className="fa fa-pencil"></span> // only work with one
</Td>

如果我尝试仅使用一个图标进行渲染，这可以正常工作，但是当我尝试渲染多个图标时，渲染的输入是 [object Object],[object Object] 而不是指定的图标。

我该如何解决？

有什么想法吗？

我尝试创建一个只有图标的特定组件，但仍然无法为多个图标工作。

<Td column="conf" className="col-md-1">
  <IconTrashButton />
  <IconPencilButton /> //Only work with one component
</Td>

提前致谢

【问题讨论】：

问题似乎与 <Td> 是什么（包/自定义组件）有关 - 它应该只是呈现 this.props.children 但似乎并非如此......
您在控制台上遇到任何错误吗？
@KushalJain 不，遗憾的是控制台上不存在任何错误
我可以解决这个问题。基于 cmets，谢谢！！

标签： javascript html reactjs

【解决方案1】：

尝试将每个放在单独的块图标扫描或 div 中

<Td column="conf" className="col-md-1">
    <span><span className="fa fa-trash"></span></span>
    <div><span className="fa fa-pencil"></span></div> // only work with one
</Td>

【讨论】：

我找到了解决问题的方法！我让最终代码在另一个答案中。谢谢。

【解决方案2】：

我根据 cmets 找到了解决此问题的方法。

<Td> 元素只渲染一个this.props.children。所以当他有多个孩子时，渲染失败。并且输出类似于[object Object],[object Object]。

所以，最终的代码是这样的

<Td column="conf" className="col-md-1">
 <div>
  <IconTrashButton />
  <IconPencilButton />
 </div>
</Td>

我希望这对其他人有所帮助。

提前致谢。

【讨论】：