は私が反応し、ブートストラップ・テーブル用のフォーマッタの内側に反応し、ブートストラップOverlayTriggerとツールチップを使用して、次のエラーを取得維持しようとしていますブートストラップOverlayTriggerとツールチップの問題

Question

に反応しますノードであり、Tooltipの必要な小道具は、文字列でなければならないid（IDが必要であることを示している例はありません）です。

"onlyChildには必ず1人の子を持つ子を渡す必要があります。"

問題の関連するコードは次のようになります。

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いずれかが/ nullに未定義またはそれらのいずれかのいずれかである可能性が高いです1つ以上のコンポーネントの配列

Answer 2

私は同じ問題がありました。私は理由を説明することはできませんが、単にOverlayTriggerタグ内にタグを追加するだけで解決しました。私のフォーマッタ関数は、リアクションクラスの中にあります。

私のソリューション：ここ

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>