不變違規：React.Children.only預計會收到一個React元素子元素

Question

我不斷收到不變的違規，我真的不知道爲什麼......它肯定與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> 
    ) 
} 

的類要渲染自定義字段：

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

Answer 1

OverlayTrigger需要一個React元素子元素，將span中的{field}包裝或其他有效的React jsx元素將解決此問題。

<li> 
    <OverlayTrigger placement="top" overlay={tooltip}> 
     <span>{field}</span> 
    </OverlayTrigger> 
</li>