不变违规:React.Children.only 期望接收单个 React 元素子元素

问题描述

我不断收到不变违规，我真的不知道为什么......这肯定与 OverlayTriggers 有关.将它们排除在外时一切正常.

I keep getting the invariant violation and I really don't know why ... it definitely has to do with the OverlayTriggers. When leaving them out everything works fine.

进口:

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} 包装在 span 或任何其他有效的 React jsx 元素中将解决此问题.

OverlayTrigger expects a React element child, wrapping {field} in span or any other valid React jsx element will fix this.

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

这篇关于不变违规:React.Children.only 期望接收单个 React 元素子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！