Реагировать Bootstrap OverlayTrigger и подсказка вопрос

Question

Я пытаюсь использовать реагировать-самозагрузку OverlayTrigger и Tooltip внутри форматировщика для реакции-самозагрузка стола и продолжать получать следующее сообщение об ошибке: только необходимая опорой

OverlayTrigger является наложением, которое, как предполагается, быть узлом, и только необходимая поддержка Tooltip - 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> 
); 
}; 

Answer 1

Вполне вероятно, что либо заявитель или toolTipInstance либо нуль/неопределенными или один из них массив из более чем одного компонента.

Answer 2

У меня была та же проблема. Я не могу объяснить, почему, но я просто решил добавить тэг внутри тега OverlayTrigger. Моя функция форматирования находится внутри класса React.

Мое решение:

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

Здесь диапазон тегов решить эту проблему.

Если я адаптировать свой код, вот решение:

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

Тогда, когда я звоню в параметре DataFormat из TableHeaderColumn:

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