未捕获的不变违规：React.Children.only 预计会在 React Bootstrap 中收到单个 React 元素子错误？答案

【问题标题】：Uncaught Invariant Violation: React.Children.only expected to receive a single React element child error in React Bootstrap?未捕获的不变违规：React.Children.only 预计会在 React Bootstrap 中收到单个 React 元素子错误？
【发布时间】：2022-07-27 02:31:57
【问题描述】：

我正在使用 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>
  );
};

老实说，无法理解组件在哪里接收多个孩子，我对此感到困惑

非常感谢

【问题讨论】：

我认为Overlay 期望它的孩子是一个组件或其他东西，而不是简单的文本。
我已经阅读 Overlay API 2 小时，但我没有找到任何 child 所需的道具。
不，我的意思是尝试嵌套一个组件，如 here 所示。
它不起作用。我从字面上复制并粘贴了我的叠加层中的示例，但我得到了错误
不确定这是否是导致问题的原因。 target ref 赋值给button，但是组件会渲染多个按钮（基于行），所以有多个目标，但是一个Overlay。

标签： reactjs react-bootstrap

【解决方案1】：

Overlay 期望其子元素包含在父元素中，所以 -

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

应该改为

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

【讨论】：