Question

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

期望了一个赋值或函数调用，而是看到了一个表达式。

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

index.js：1446警告：函数作为React子代无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

以下是我的组件：

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

Antd / React：尝试设置Antd折叠面板元素的'extra'参数样式

1 个答案: