陣營引導OverlayTrigger和工具提示問題

我想使用的反應，引導OverlayTrigger和工具提示格式化的內部反應的自舉表，並不斷收到以下錯誤：陣營引導OverlayTrigger和工具提示問題

OverlayTrigger唯一需要的道具是覆蓋這應該要成爲一個節點，Tooltip唯一需要的道具是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> 
); 
};

來源

2016-04-26 Clockworkk

這可能是因爲無論是提交或toolTipInstance有以下任一空/未定義或其中之一是一個多於一個組件的數組。

來源

2016-05-03 21:45:56

我有同樣的問題。我無法解釋爲什麼，但我只是通過在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>); 
};

然後，當我在TableHeaderColumn的DATAFORMAT參數調用：

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

來源

2016-07-19 09:41:40

陣營引導OverlayTrigger和工具提示問題

回答

相關問題