反应材料用户界面动态添加扩展面板在按钮单击

Question

我正在尝试使用 React Material UI 动态添加扩展面板。它已添加，但我无法扩展它(即即使面板未展开isExpanded也是如此(。我使用的是材料 UI 版本 4.4.1，而 React.js 版本是 16.9.0。谁能帮我弄清楚为什么它没有按预期工作？

const TransportFlow = () => {
const [expanded, setExpanded] = React.useState('');
const [points, setPoints] = React.useState([]);
const handleChange = panel => (evt, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
const addPoint = () => {
const arr = [];
const pointPanel = (
<ExpansionPanel key='p1' expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} id="panel1bh-header" aria-controls="panel1bh-content">
Hello
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>Some more text</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
);
arr.push(pointPanel);
setPoints([...arr]);
}
return (
<div className="flow">
{points.map((point) => point)}
<button className="add-waypoint" onClick={() => addPoint()}>Add</button>
</div>
); }

链接到代码沙箱：链接

Answer 1

问题是当你渲染点时，你没有为它们提供任何道具(比如展开(。
因此，当您单击扩展面板时，您可以更改状态并在 TransportFlow 上触发渲染。
point 是 TransportFlow 的子级，但它不会呈现，因为"point"道具没有改变(因为你没有向它发送扩展道具，它不在乎展开状态何时改变(。
解决方案是稍微改变结构，这样您就可以为"点"提供道具：

const TransportFlow = () => {
const [expanded, setExpanded] = React.useState("");
const [points, setPoints] = React.useState([]);
const handleChange = panel => (evt, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
const addPoint = () => {
const arr = [];
arr.push('dummy'); //just to notify there's something in the array
setPoints([...arr]);
};
const PointPanel = (props) => (
<ExpansionPanel
key="p1"
expanded={props.expanded === "panel1"}
onChange={props.handleChange("panel1")}
>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
id="panel1bh-header"
aria-controls="panel1bh-content"
>
Hello
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>Some more text</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
);
return (
<div className="flow">
{points.map(point => <PointPanel  expanded={expanded} handleChange={handleChange}/>)}
<button className="add-waypoint" onClick={() => addPoint()}>
Add
</button>
</div>
);
};

如您所见，我使用 addPoint 只是为了通知数组中有一些东西(如果您想要多个扩展面板 - 您需要稍微更改结构( 我还将 PointPanel 提取到一个组件中 - 因此您可以为其提供道具。

您可以参考此 CodeSandbox 示例。