自定义 Accordion 组件不呈现正文元素

Question

我有一个来自 Antd 的折叠/手风琴组件，我从我的应用程序中的一个元素文件夹中自定义并导出了它，以便我可以在整个应用程序中重复使用它。

当我导入它并将其包含在另一个组件中时，我无法在其中呈现任何正文元素。有谁知道为什么会发生这种情况以及是否有解决方法？

当手风琴的主体打开显示时，还有一个较小的问题，空白不会填满整个容器，看起来右侧有一个灰色的柱子。

我在这里包含了一个代码沙箱，以更好地说明我的意思

自定义折叠组件

import React, { useState } from "react";
import styled from "styled-components";
import { Collapse as AntCollapse } from "antd";

const StyledCollapse = styled(AntCollapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`;

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
      />
    </StyledCollapse>
  );
};

export default CustomCollapse;

主要组件

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "antd/dist/antd.css";

import AntCollapse from "./CustomCollapse";

const Flexbox = styled.div`
  font-family: sans-serif;
  flex-direction: column;
  display: flex;
  justify-content: center;
  border: solid 1px palevioletred;
  padding: 10%;
  margin: 10%;
`;

const ConfigurationOptions = () => (
  <Flexbox>
    <AntCollapse header="configuration test">
      <h1>Test</h1>
      <p>Test Paragraph</p>
      <p>Test Paragraph</p>
    </AntCollapse>
  </Flexbox>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<ConfigurationOptions />, rootElement);

Answer 1

您忘记在自定义折叠组件中传递子级。

要使其工作，请执行以下操作：

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

（也为了让奇怪的灰色侧栏离开你应该这样做：

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={
          <span>
            {props.header}
            <span style={{ color: "#0076de", float: "right" }}>
              {disabled ? "SHOW" : "HIDE"}
            </span>
          </span>
        }
        key="1"
        showArrow={false}
        bordered={false}
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

)