Antd / React: Попытка стилизовать дополнительный параметр элемента Antd Collapse Panel

Question

У меня есть панель antd как часть элемента collapse / accordion, и я пытаюсь стилизовать и визуализировать дополнительный раздел текста как часть заголовка.Я прочитал их документы, и они позволяют вам добавлять дополнительные элементы, используя свойство extra, но я не могу его стилизовать или добавить свойства условного рендеринга.Я пытаюсь добиться того, чтобы текст правой части заголовка показывался как «показывать», когда аккордеон закрыт, и изменял его на «скрывать», когда аккордеон был открыт.Я также хочу, чтобы стиль текста синий.Я решился на различные подходы, включая следующую функцию вверху, и ничего не работает.С этой текущей реализацией я получаю несколько ошибок.

Ожидал присваивания или вызова функции и вместо этого увидел выражение.

index.js: 1446 Предупреждение: сбойный тип реквизита: неверный реквизит extra передан CollapsePanel, ожидается ReactNode.

index.js: 1446 Предупреждение: функции недопустимы какРеагирует ребенок.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не вернуть ее.

Мой компонент содержит следующее:

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

Демо