自定义手风琴组件未渲染主体元素

Question

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

当我导入它并将其包含在另一个组件中时，我无法在其中渲染任何body元素。有谁知道为什么会这样，是否有办法解决？

作为一个较小的附带问题，当手风琴的主体打开显示时，空格不会填充整个容器，并且看起来好像有一个灰色的列在右侧向下流动。

我在此处包括了一个代码沙箱，以更好地说明我的意思

https://www.add-in-express.com/creating-addins-blog/2012/05/31/outlook-search-csharp-vbnet/

自定义折叠组件

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

）