React Bootstrap OverlayTrigger 和 Tooltip 错误答案

【问题标题】：React Bootstrap OverlayTrigger and Tooltip errorReact Bootstrap OverlayTrigger 和 Tooltip 错误
【发布时间】：2016-08-20 21:24:24
【问题描述】：

我正在尝试在 react-bootstrap-table 的格式化程序中使用 react-bootstrap OverlayTrigger 和 Tooltip 并不断收到以下错误：

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

“onlyChild 必须传递一个只有一个孩子的孩子。”

相关代码如下：

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>
  );
};

【问题讨论】：

标签： reactjs ecmascript-6 react-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

提交者或 toolTipInstance 可能为 null/未定义，或者其中一个是包含多个组件的数组。

【讨论】：