Question

我正在尝试使用react-bootstrap OverlayTrigger和Tooltip进行react-bootstrap-table格式化，并不断收到以下错误：

OverlayTrigger唯一需要的prop是overlay，它应该是一个节点而Tooltip只需要prop就是id（尽管他们的例子中没有一个显示你需要一个ID）需要是一个字符串

＆＃34; onlyChild必须通过只有一个孩子的孩子。＆＃34;

相关的相关代码如下：

import {Button, DropdownButton, MenuItem, Modal,
    OverlayTrigger, Tooltip} from 'react-bootstrap';

....

const submitterFormatter = (submitter, row) => {
  return (
    <OverlayTrigger placement="bottom" overlay={toolTipComponent(submitter, row)}>
      {submitter}
    </OverlayTrigger>
  );
};

const toolTipComponent = (toolTipText, row) => {
  return (
    <Tooltip id={String(row.id)}>
      {toolTipText}
    </Tooltip>
  );
};

我还尝试了以下的submitterFormatter

const submitterFormatter = (submitter, row) => {
  return (
    const toolTipInstance = toolTipComponent(submitter, row);
    <OverlayTrigger placement="bottom" overlay={toolTipInstance}>
      {submitter}
    </OverlayTrigger>
  );
};

Answer 1

我遇到了同样的问题。我无法解释原因，但我只是通过在OverlayTrigger标签内添加标签来解决。我的格式化程序函数位于React类中。

我的解决方案：

tooltipFormatter(cell, row){
    return (<OverlayTrigger placement="right" overlay={<Tooltip id={String(row.id)}>{cell}</Tooltip>}><span>{cell}</span></OverlayTrigger>);
};

这里，span标签解决了这个问题。

如果我调整了您的代码，请参见以下解决方案：

submitterFormatter(submitter, row){
    return (<OverlayTrigger placement="bottom" overlay={<Tooltip id={String(row.id)}>{submitter}</Tooltip>}><span>{submitter}</span></OverlayTrigger>);
};

然后，当我调用TableHeaderColumn的dataFormat参数时：

<TableHeaderColumn dataField="comment" dataFormat={this.tooltipFormatter}>TableHeader</TableHeaderColumn>

Answer 2

提交者或toolTipInstance可能是null / undefined，或者其中一个是多于1个组件的数组。

React Bootstrap OverlayTrigger和Tooltip问题

2 个答案: