Как добавить динамическое содержимое c в панели расширения пользовательского интерфейса React Material, сохраняя при этом только одну активную вкладку за раз

Question

У меня есть проект WebGL / React, который генерирует список пользователей из фиктивных данных по клику.

Я хочу, чтобы этот контент появлялся в виде аккордеона и, как я уже имел хороший опыт работы с пользовательским интерфейсом материала до этого Я подумал, что буду использовать их панель расширения.

Она работает хорошо прямо с демонстрационной страницы, однако, если я захочу отобразить свою базу данных пользователей и вместо этого заполнить панели расширения, она, похоже, избавится удобной функциональности.

Мне бы хотелось, чтобы первая панель расширения открывалась по умолчанию, а затем, когда вы нажимаете на одну панель, закрываются все остальные панели, что является поведением по умолчанию из примера.

Когда я передаю реквизит

      <ExpansionPanel
        square
        expanded={expanded === "panel1"}
        onChange={handleChange("panel1")}
      >
        <ExpansionPanelSummary
          aria-controls="panel1d-content"
          id="panel1d-header"
        >
          {props.country}
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>{props.children}</ExpansionPanelDetails>
      </ExpansionPanel>
    </div>

, тогда использую его здесь ...

              {users &&
                users.map(user => (
                  <Accordion title={user.name} key={user.name}>
                    <div className="overlay-container">
                      <div className="overlay overlay-anim">
                        <div className="overlay-content-container">
                          <div className="name-container">
                            <h1 key={user.id} className="user_name">
                              {user.name}
                            </h1>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Accordion>
                ))}

Он открывает все панели по умолчанию и не закрывают другие, когда один активен. (опять же не настоящие данные и gif делает его немного глючным, но я не могу сгенерировать пример, так как база кода слишком велика).

Есть ли у кого-нибудь идеи или примеры того, как этого добиться?

EDIT

в соответствии с предложением ниже добавили id в функцию отображения и адаптировали компонент расширения, к сожалению, получив тот же эффект / проблемы

  const [expanded, setExpanded] = React.useState("panel" + props.id);

  const handleChange = panel => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  return (
    <div>
      <ExpansionPanel
        expanded={expanded === "panel" + props.i}
        onChange={handleChange("panel" + props.i)}
      >
        <ExpansionPanelSummary
          aria-controls={"panel" + props.id + "d" + "-content"}
          id={"panel" + props.id + "d" + "-header"}
        >
          {props.country}
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>{props.children}</ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}```

Answer 1

Трудно сказать, что вы делаете с ExpansionPanel, но, похоже, у вас одинаковые

<ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>

для каждого из них, вам нужно иметь уникальные имена (panel1, panel2, panel3) для них .

РЕДАКТИРОВАТЬ:

Вы можете добавить итератор в функцию карты:

users.map((user, i) => (

и передать его в ExpansionPanel в качестве реквизита для

<ExpansionPanel expanded={expanded === 'panel' + props.i} onChange={handleChange('panel' + props.i)}>

РЕДАКТИРОВАТЬ # 2: обновленный ответ с рабочим кодом и причина, почему ваш не работал.

Основная функция, обратите внимание, что вы должны добавить здесь useState и отдайте их дочернему элементу CustomizedExpansionPanels.

example.jsx

import React, { useState } from 'react'
import { withStyles } from '@material-ui/core/styles'
import CustomizedExpansionPanels from './TestTab.jsx'

const styles = (theme) => ({
/* ... your styles... */
})

const users = [
    { name: '5001', color: 'green', type: 'None' },
    { name: '5002', color: 'blue', type: 'Glazed' },
    { name: '5003', color: 'red', type: 'Chocolate' },
    { name: '5004', color: 'orange', type: 'Maple' }
]

function Example(props) {
    const [expanded, setExpanded] = useState('panel_0') // change 0 to the number u want to be open by default
    return (
            <div>
                {users.map((user, i) => CustomizedExpansionPanels(user, i, expanded, setExpanded))}
            <div/>
    )

export default withStyles(styles, { withTheme: true })(Example)

TestTab.jsx

import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import MuiExpansionPanel from '@material-ui/core/ExpansionPanel'
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import Typography from '@material-ui/core/Typography'

const ExpansionPanel = withStyles({
    root: {
        border: '1px solid rgba(0, 0, 0, .125)',
        boxShadow: 'none',
        '&:not(:last-child)': {
            borderBottom: 0,
        },
        '&:before': {
            display: 'none',
        },
        '&$expanded': {
            margin: 'auto',
        },
    },
    expanded: {},
})(MuiExpansionPanel)

const ExpansionPanelDetails = withStyles((theme) => ({
    root: {
        padding: theme.spacing(2),
    },
}))(MuiExpansionPanelDetails)

const ExpansionPanelSummary = withStyles({
    root: {
        backgroundColor: 'rgba(0, 0, 0, .03)',
        borderBottom: '1px solid rgba(0, 0, 0, .125)',
        marginBottom: -1,
        minHeight: 56,
        '&$expanded': {
            minHeight: 56,
        },
    },
    content: {
        '&$expanded': {
            margin: '12px 0',
        },
    },
    expanded: {},
})(MuiExpansionPanelSummary)

export default function CustomizedExpansionPanels(user, id, expanded, setExpanded) {
    const handleChange = (panel) => (event, newExpanded) => {
        setExpanded(newExpanded ? panel : false)
    }
    const { name, color, type } = user

    return (
        <div>
            <ExpansionPanel square expanded={expanded === `panel_${id}`} onChange={handleChange(`panel_${id}`)}>
                <ExpansionPanelSummary aria-controls={`panel_${id}d-content`} id={`panel_${id}d-header`}>
                    <Typography style={{ color }}>{`Collapsible Group Item #${id}`}</Typography>
                </ExpansionPanelSummary>
                <ExpansionPanelDetails>
                    <Typography>
                        {`name: ${name} type: ${type}`}
                    </Typography>
                </ExpansionPanelDetails>
            </ExpansionPanel>
        </div>
    )
}

Hard сказать наверняка, но похоже, что вы зацикливаете создание одной и той же панели, где расширенный хук существует в каждой из них и имеет значение id своей собственной панели =>, не связанной с открытием и закрытием других панелей. Вам нужно создать каждую панель ExpansionPanel со своими собственными переменными и иметь 1 хук для управления всеми ними.