私は不変違反を繰り返しますが、なぜかわかりません...それは間違いなくOverlayTriggersに関係しています。それらを除外すると、すべてが正常に機能します。
インポート:
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
値にツールチップがあるキー/値ペアでリスト項目をレンダリングすることを想定:
const renderCustomField = (field,customFields) => {
const tooltip = (<Tooltip id="tooltip">{customFields[field]['sub']}</Tooltip>)
return (
<li>
<OverlayTrigger placement="top" overlay={tooltip}>
{field}
</OverlayTrigger>
</li>
)
}
customFieldsをレンダリングするクラス:
export default class EventHeaderCustomFields extends Component {
render () {
const customFieldsNames = Object.keys(this.props.customFields);
return (
<Col xs={12}>
<h4><strong>Short overview:</strong></h4>
<ul>
{customFieldsNames.map(
(field) => renderCustomField(field,this.props.customFields)
)}
</ul>
</Col>
)
}
}
EventHeaderCustomFields.propTypes = {
eventData:PropTypes.object
};
OverlayTriggerは、React要素の子、スパン内の{field}または他の有効なReact jsx要素のラッピングでこれを修正します。
<li>
<OverlayTrigger placement="top" overlay={tooltip}>
<span>{field}</span>
</OverlayTrigger>
</li>