React Bootstrap OverlayTrigger and Tooltip issue

问题

I am trying to use react-bootstrap OverlayTrigger and Tooltip inside of a formatter for react-bootstrap-table and keep getting the following error:

OverlayTrigger's only required prop is overlay which is supposed to be a node and Tooltip's only required prop is id (despite none of their examples showing that you need an ID) which needs to be a string.

"onlyChild must be passed a children with exactly one child."

relevant code in question looks like:

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

I have also tried the following for submitterFormatter

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

回答1:

I had the same problem. I can't explain why but I simply solved by adding a tag inside OverlayTrigger tag. My formatter function is inside a React Class.

My solution:

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

Here, span tag solved the problem.

If I adapt your code, here's the solution :

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

Then, when I call in dataFormat parameter of TableHeaderColumn:

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

回答2:

It's likely that either submitter or toolTipInstance are either null/undefined or one of them is an array of more than 1 component.

来源：https://stackoverflow.com/questions/36875266/react-bootstrap-overlaytrigger-and-tooltip-issue

标签

reactjs

ecmascript-6

react-bootstrap