クリックするとモックデータからユーザーのリストを生成するWebGL/Reactプロジェクトがあります。
このコンテンツをアコーディオンで表示したいのですが、拡張パネルを使用する前に、マテリアルUIの経験が豊富だったためです。
これはデモページから直接機能しますが、ユーザーデータベースをマッピングして拡張パネルにこれを代わりに入力したい場合は、便利な機能がなくなっているように見えます。
最初の拡張パネルをデフォルトで開いてから、1つのパネルをクリックすると、他のすべてのパネルが閉じます。これは、例のデフォルトの動作です。
小道具を渡すとき
<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>
))}
デフォルトですべてのパネルを開き、1つがアクティブなときは他のパネルを閉じません。 (ここでも実際のデータではなく、gifは少しバグがありますが、コードベースが大きすぎるため、例を生成できません)。
誰かがこれを達成する方法のアイデアや例を持っていますか?
編集
以下のように、提案はマッピング機能に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>
);
}```
ExpansionPanelで何をしているのかを言うのは難しいですが、同じように見えます
<ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
彼ら全員のために、あなたは彼らにユニークな名前(パネル1、パネル2、パネル3)を持つ必要があります。
編集:
イテレータをマップ関数に追加できます:
users.map((user, i) => (
そして、私は小道具としてExpansionPanelに渡しました
<ExpansionPanel expanded={expanded === 'panel' + props.i} onChange={handleChange('panel' + props.i)}>
編集#2:動作するコードと更新されなかった理由を含む更新された回答
メイン関数、uはここに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>
)
}
確かに言うのは難しいですが、拡張フックがそれぞれに存在し、その独自のパネルの値idを持つ1つの同じパネルの作成をループしているようです=>他のパネルの開閉に関連していません。独自の変数を使用して各ExpansionPanelを作成し、それらをすべて制御する1つのフックを設定する必要があります。