未捕获的不变冲突:React.Children.only expected to receive a single Re

Question

我正在用React Bootstrap构建一个小组件，但我遇到了这个错误

Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.
The above error occurred in the <Position> component:
in BundledSchedulesModal (created by ActiveSchedulesTable)
(...)

这是我触发这个覆盖的组件。它是一个React Table组件，但不要认为第三方库会以任何方式影响这个错误。

import { BundledSchedulesModal } from './BundledSchedulesModal';
export const ActiveSchedulesTable = ({
}) => {
const [showBundledModal, setShowBundledModal] = React.useState({
id: undefined,
show: false,
});
const target = React.useRef(null);
const columns = React.useMemo(
() => [
{
Header: t('Type'),
(...)
},
{
Header: t('Description'),
(...)
},
{
Header: t('Next Run'),
(...)
},
{
Header: '',
id: 'controls',
align: 'right',
width: 40,
Cell: ({ row }) => (
<>
<div className="full-width flex--align-center flex--end">
**<button
className="btn--plain"
onClick={() => {
setShowBundledModal({
id: row.original.id,
show: !showBundledModal.show,
});
}}
ref={target}
>
<i className="fa fa-info-circle table-tooltip" />
</button>**
<button
onClick={() => setDeleteValueRow(row.original)}
className="custom-button flex--centered flex--align-center"
>
<CloseIcon width="15px" height="15px" />
</button>
</div>
</>
),
},
],
[],
);
const schedules = React.useMemo(() => data || [], [data]);
return (
<>
<PaginatedTable
(...)
/>
**{showBundledModal.show ? (
<BundledSchedulesModal
type="schedule"
id={showBundledModal.id}
show={showBundledModal.show}
target={target.current}
/>
) : null}**
</>
);
};

这是我在点击按钮和出现错误时试图打开的覆盖图。

import * as React from 'react';
import { Overlay } from 'react-bootstrap';
export const BundledSchedulesModal = ({ show, type, id, target }) => {
return (
<Overlay target={target} show={show} placement="left">
schedules
</Overlay>
);
};

老实说，我不明白组件在哪里接收到多个孩子，我被卡住了

非常感谢

Answer 1

Overlay希望其子元素包含在父元素中，因此-

<Overlay target={target} show={show} placement="left">
schedules
</Overlay>

应该改为

<Overlay target={target} show={show} placement="left">
<span>schedules</span>
</Overlay>