javascript - Antd/ react : Trying to style the 'extra' parameter of the Antd Collapse Panel element

Question

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

Expected an assignment or function call and instead saw an expression.

index.js:1446 Warning: Failed prop type: Invalid prop extra supplied to CollapsePanel, expected a ReactNode.

index.js:1446 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

以下是我的组件:

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