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

render two or more icons inside column of reactable in reactjs

本文关键字：两个 图标 中的 reactjs reactable      更新时间：2023-09-26

我正在尝试在一个可访问的列中添加两个或多个图标。

<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>

Thanks in advance

试着把每一个单独的块图标扫描或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>

我根据评论找到了解决这个问题的方法。

<Td>元素只呈现一个this.props.children。因此，当他有多个孩子时，渲染失败。输出为[object Object],[object Object]。

最后的代码是这样的

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

我希望这对别人有帮助。

相关文章：