Antd/React：尝试设置 Antd Collapse Panel 元素的“额外”参数的样式

Question

我有一个 antd 面板作为折叠/手风琴元素的一部分，我正在尝试对文本的附加部分进行样式设置和渲染，作为标题的一部分。我通读了他们的文档，他们允许您通过使用 extra 属性添加额外的元素，但我似乎无法为其设置样式或添加条件渲染属性。我想要实现的是在手风琴关闭时将标题的右侧文本设置为“显示”，并在手风琴打开时将其更改为“隐藏”。我还想将文本设置为蓝色。我冒险尝试了不同的方法，包括顶部的以下功能，但没有任何效果。在当前的实现中，我遇到了几个错误。

预期的是赋值或函数调用，但看到的是表达式。

index.js:1446 警告：道具类型失败：提供给 CollapsePanel 的道具 extra 无效，应为 ReactNode。

index.js:1446 警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

以下是我的组件：

import React from 'react'
import styled from 'styled-components'
import { Col, Row, Collapse } from 'antd'
import Checkbox from '../elements/Checkbox'
import icon from '../../assets/caretDown.svg'
import Button from '../elements/Button'

const { Panel } = Collapse

function showHide() {
  return Collapse.isActive ? <p>SHOW</p> : <p>HIDE</p>
}

const ConfigurationOptions = () => (
  <Container>
    <Row>
      <Col span={12}>
        <StyledCollapse>
          <Panel
            header="DROPDOWN EXAMPLE"
            key="1"
            showArrow={false}
            bordered={false}
            extra={showHide}
          >
            <div>
              <StyledH1>Placeholder</StyledH1>
            </div>
        </Panel>
      </StyledCollapse>
    </Col>
  </Row>
</Container>
)

const StyledH1 = styled.h1`
  font-weight: 700;
`

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

export default ConfigurationOptions

Answer 1

Collapse.Panel extra 属性接受 ReactNode 而不是函数，这意味着您需要将 ReactElement 传递给它：

extra={<p>{disabled ? 'SHOW' : 'HIDE'}</p>}

function FromValidate() {
  const [disabled, setDisabled] = useState(true);
  return (
    <Flexbox>
      <Row>
        <Col span={12}>
          <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <Collapse.Panel
              header="DROPDOWN EXAMPLE"
              key="1"
              showArrow={false}
              bordered={false}
              extra={<p>{disabled ? 'SHOW' : 'HIDE'}</p>}
            >
              <div>
                <StyledH1>Placeholder</StyledH1>
              </div>
            </Collapse.Panel>
          </StyledCollapse>
        </Col>
      </Row>
    </Flexbox>
  );
}

Demo