javascript - 自定义 Accordion 组件不渲染主体元素

Question

我有一个来自 Antd 的折叠/ Accordion 组件，我对其进行了自定义并从应用程序内的 elements 文件夹中导出，以便我可以在应用程序中重复使用它。

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

还有一个较小的问题，当 Accordion 的主体打开显示时，空白不会填充整个容器，并且看起来右侧有一个灰色的列。

我在这里添加了一个代码沙箱，以更好地展示我的意思

自定义折叠组件

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>
  );
};

)