Javascript Antd/React：尝试设计'；额外'；Antd折叠面板元素的参数

我有一个antd面板作为折叠/手风琴元素的一部分，我正在尝试设置样式并渲染一段额外的文本作为标题的一部分。我通读了他们的文档，他们允许您通过使用

extra

属性添加额外的元素，但我似乎无法设置它的样式或添加条件渲染属性。我试图实现的是在手风琴关闭时将标题的右侧文本设置为“显示”，在手风琴打开时将其更改为“隐藏”。我还想将文本设置为蓝色。我尝试了不同的方法，包括顶部的以下函数，但没有任何效果。在当前的实现中，我遇到了几个错误

应为赋值或函数调用，而应为表达式

index.js:1446警告：失败的道具类型：提供给

CollapsePanel

的无效道具

extra

，应为节点

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

从“React”导入React
从“样式化组件”导入样式化
从“antd”导入{Col，Row，Collapse}
从“../elements/Checkbox”导入复选框
从“../../assets/caretDown.svg”导入图标
从“../elements/Button”导入按钮
const{Panel}=折叠
函数showHide（）{
返回Collapse.isActive？显示：隐藏

}
常量配置选项=（）=>(
占位符
)
const StyledH1=styled.h1`
字号：700；
`
const StyledCollapse=已设置样式（折叠）`
&&& {
边界：无；
边界半径：0px；
背景色：#f7f7f7；
盒影：无；
}
`
导出默认配置选项

extra

属性接受

ReactNode

不是函数，这意味着您需要向其传递

ReactElement

：

extra={{disabled'SHOW'：'HIDE'}
}

函数FromValidate（）{ const[disabled，setDisabled]=使用状态（true）； 返回( setDisabled（prev=>！prev）}> 占位符 ); }

---

在处理之前修复语法错误的代码不确定您的意思。我添加了我丢失的结束标记。这就是你说的吗？补充回答嘿！所以这几乎是可行的，我唯一的问题是，因为我有3个独立的面板，当我将此逻辑应用于所有3个面板时，它会同时影响所有面板，即使只有一个面板打开，而其他面板仍然折叠。我分叉了您原来的沙盒并对其进行了更新，以显示我在这里的意思：。关于如何解决问题有什么想法吗？您的问题超出了本问题的范围，您应该问另一个问题（请随时发送链接）（并接受答案）答案已接受，新问题已出现：