javascript - 如何制作嵌套 Accordion ？

Question

semantic_ui-react 库中存在组件 Accordion .有一些示例，但我必须制作具有结构的嵌套 Accordion :

-accordion:
    -sub_accordion1
    -sub_accordion2
    -sub_accordion3

我看到有面板嵌套 Accordion 的示例，但我不想将 Accordion 放入面板中。我试过了:

export default class AccordionExampleStandard extends Component {
  state = { activeIndex: 0 }

  handleClick = (e, titleProps) => {
    const { index } = titleProps
    const { activeIndex } = this.state
    const newIndex = activeIndex === index ? -1 : index

    this.setState({ activeIndex: newIndex })
  }

  render() {
    const { activeIndex } = this.state

    return (
      <Accordion>
        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
          <Icon name='dropdown' />
          What is a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 0}>
          <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
          <Icon name='dropdown' />
          What kinds of dogs are there?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 1}>
          Content1
        </Accordion.Content>

        <Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
          <Icon name='dropdown' />
          How do you acquire a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 2}>
          Content2
        </Accordion.Content>
<Accordion.Title active={activeIndex === 3} index={3} onClick={this.handleClick}>
          <Icon name='dropdown' />
          What kinds of dogs are there?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 3}>
         Content3
        </Accordion.Content>
        </Accordion.Content>
      </Accordion>
    )
  }
}

它呈现组件，但我只能折叠主 Accordion 而不能折叠它的子组件。我该如何执行此功能？

Answer 1

既然你提到你需要一个简单的解决方案，那么最好使用 panels 因为它们似乎会自动操作 activeIndex 这是决定扩展的主要属性和 Accordion 的折叠。如果你像上面那样自己做，你需要维护所有层次结构并通过调整 onClick 处理程序中的状态来操纵你自己。因此，如果您的用例不是自定义的或复杂的，您可以尝试下面的方法。

这是一个工作演示 NESTED ACCORDION SEMANTIC UI

import { Accordion } from 'semantic-ui-react';

const AccordionContent = (content) => (
  <div className="indent">
    {content}
  </div>
)

const SubAccordion1Panels = [
  {
    title: 'Sub Accordion 11',
    content: { content: AccordionContent('11 Content'), key: '11-content'} ,
    key: 'sub-accordion-11'
  }, {
    title: 'Sub Accordion 12',
    content: { content: AccordionContent('12 Contents'), key: '12-content' },
    key: 'sub-accordion-12'
  }, {
    title: 'Sub Accordion 13',
    content: { content: AccordionContent('13 Contents'), key: '13-content' },
    key: 'sub-accordion-13'
  },
]

const SubAccordion1Content = (
  <div className="indent">
    <Accordion.Accordion
      style={{marginLeft: "20px"}}
      className="no-padding"
      panels={SubAccordion1Panels}
    />
  </div>
)

const SubAccordionPanels = [
  {
    title: 'Sub Accordion 1',
    content: { content: SubAccordion1Content, key: 'sa1-content' },
    key: 'sub-accordion-1'
  }, {
    title: 'Sub Accordion 2',
    content: { content: AccordionContent('SA2 Content'), key: 'sa2-content' },
    key: 'sub-accordion-2'
  }, {
    title: 'Sub Accordion 3',
    content: { content: AccordionContent('SA3 Content'), key: 'sa3-content' },
    key: 'sub-accordion-3'
  }
]

const SubAccordions = (
  <div className="indent">
    <Accordion.Accordion
      className="no-padding"
      panels={SubAccordionPanels}
    />
  </div>
)

const AccordionPanels = [
  { title: 'Accordion', content: { content: SubAccordions, key: 'sub-accordions' } },
]

const AccordionExampleNested = () => (
  <Accordion
    defaultActiveIndex={0}
    panels={AccordionPanels}
  />
)

class App extends React.Component {
  render() {
    return (
      <AccordionExampleNested />
    )
  }
}

同样对于缩进，你需要覆盖默认的css

.indent {
  margin-left: 1em;
}

.no-padding {
  padding: 0px !important;
  margin: 0px !important;
}