Javascript Google Material的ExpansionPanel for ReactJS默认情况下不展开

我正在使用谷歌的MaterialUI构建一个ReactJS应用程序

在提交搜索后，我在网格中显示了以下子类。根据搜索是一种类型还是另一种类型，此子类中的ExpansionPanel应该展开还是不展开

以下是正在父组件中映射的类：

expandByDefault布尔值是从父类传递的

class SearchResults extends React.Component {
    render () {
        const { classes } = this.props;
        const { batchAndContents } = this.props;
        const { expandByDefault } = this.props;
        return (
            <div>
                <ExpansionPanel defaultExpanded={expandByDefault} >
                    <ExpansionPanelSummary>
                    <Typography className={classes.heading}>Box {batchAndContents.sequenceCode}</Typography>
                    </ExpansionPanelSummary>
                    <ExpansionPanelDetails>
                        <SearchResultsTable contents={batchAndContents.contents}/>
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        )
    }
}

以下是父类的渲染方法： 您可以在SearchResults（我的自定义类）中看到，我传递了一个名为expandByDefault的道具

render () {
        return (
            <div>
              . . . . .
              . . . . .
              . . . . .
              <Grid container spacing={24} style={{padding: 24}}>
                {this.state.searchResults.map((searchResult) => (
                    <Grid item key={searchResult.sequenceCode+searchResult.state}  xs={12}>
                        <SearchResults batchAndContents={searchResult} expandByDefault={this.state.lastSearchType === "ContentBarcode"}/>
                    </Grid>
                ))}
            </Grid>
            </div>
        )
    }

我尝试了几种不同的方法来实现这一点，但我似乎无法理解我遗漏了什么

有趣的是，当我最初执行搜索时，ExpansionPanel的属性defaultExpanded设置为true，它就工作了。但是，如果我不刷新页面并使用其他类型执行另一次搜索，则当该类型导致该行为时，结果不会崩溃

如果最初执行搜索且ExpansionPanel defaultExpanded设置为false，则会发生相同的行为。它会在单击时展开，默认为折叠，但是，当将搜索类型更改为应该导致默认展开面板的类型时，它不起作用

我感谢任何指导

defaultExpanded属性仅定义组件的默认状态，即在首次渲染面板时是否展开面板。稍后对此值的更改不会影响面板当前是否展开

要使面板根据应用程序中的更改展开或折叠，您需要使用expanded属性。从：

如果为true，则展开面板，否则折叠面板。设置此道具可以控制面板

---

这里的问题是父视图中元素上的键没有更改

使用不同类型执行搜索时，会显示相同的数据，只是显示方式不同而已

根据我的理解，如果react看到相同的密钥和相同的数据，它不需要重新渲染，即使有状态作为道具传递给子级。在我的例子中，国家被作为道具传递给儿童

作为解决方案，我将搜索类型附加到键。因此，现在当搜索类型更改时，保存结果的键也会更改，并且会触发的子项被重新呈现

---

很抱歉，这不是最好的解释，我对ReactJS有一些实践经验，但从幕后的角度来看，我不能说得那么好

我遇到了同样的问题。该属性似乎只查看初始渲染中的值

如果它未定义或在初始渲染中具有默认值，则即使this.props.expandByDefault的值发生更改，也将使用它；它完全被忽略了

如果要使用此功能，必须在道具收到正确的值之前避免渲染组件

---

一开始似乎很奇怪，但仔细想想，这是有道理的。一旦最初呈现，API就不想冒覆盖用户所采取的操作的风险，不经意地关闭或打开对话框。它可能会锁定面板。

您想要展开，而不是defaultExpanded。@Herohtar谢谢您的回复，实际上这不是问题所在，我在下面发布了我的解决方案。非常感谢。嘿，谢谢你的回复！组件本身实际上可以在不需要手动管理的情况下切换打开和关闭。我知道您可以设置onClick操作侦听器，然后将其打开或关闭。事实上，我发现了问题，我马上就发布。再次感谢。我有点困惑为什么这个答案被否决了，我想这是因为误解。后来我意识到这和我的答案实际上是一样的+1这就是我的答案的基本意思；无法使用defaultExpanded，因为组件没有被重新渲染。但是，强制React重新渲染组件并不是一个理想的解决方案，因为它会降低性能并影响用户体验。expanded是更好的选择，而且更简单，除非您还需要允许用户扩展/折叠这些面板，在这种情况下，您需要添加一些额外的逻辑。