Reagieren Bootstrap OverlayTrigger und Tooltip Ausgabe

Question

Ich versuche, innerhalb eines Formatierer zu verwenden, reagieren-Bootstrap OverlayTrigger und Tooltip für reagieren-Bootstrap-Tabelle und halten Sie die folgende Störung zu erhalten:

OverlayTrigger die einzige erforderliche Stütze ist Overlay, die angeblich um ein Knoten zu sein und Tooltips einzige benötigte Prop ist ID (obwohl keines ihrer Beispiele zeigt, dass du eine ID benötigst), die eine Zeichenkette sein muss.

"onlyChild muss ein Kind mit genau einem Kind übergeben werden."

entsprechenden Code in Frage wie folgt aussieht:

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

Ich habe auch die folgenden für submitterFormatter

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

Answer 1

versucht Es ist wahrscheinlich, dass entweder Einreicher oder toolTipInstance sind entweder null/undefiniert oder einer von ihnen ist ein Array von mehr als 1 Komponente.

Answer 2

Ich hatte das gleiche Problem. Ich kann das nicht erklären, aber ich habe es einfach gelöst, indem ich ein Tag innerhalb des OverlayTrigger-Tags hinzugefügt habe. Meine Formatiererfunktion befindet sich in einer React-Klasse.

Meine Lösung:

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

Hier gelöst span-Tag das Problem.

Wenn ich Ihren Code anpassen, hier ist die Lösung:

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

Dann, als ich in dataformat Parameter TableHeaderColumn nennen:

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