web-dev-qa-db-ja.com

不変違反：React.Children.onlyは、単一のReact要素の子

私は不変違反を繰り返しますが、なぜかわかりません...それは間違いなく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
};
reactjsreact-bootstrap
13
Fabian Bosler

OverlayTriggerは、React要素の子、スパン内の{field}または他の有効なReact jsx要素のラッピングでこれを修正します。

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