Question

我正在使用Google的Material-UI构建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>
        )
    }
}

这是父类的render方法：您可以在我的自定义类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，则会发生相同的行为。点击后它会展开，默认情况下会折叠，但是，当将搜索类型更改为应该导致默认展开面板的内容时，它将无法正常工作。

我感谢任何指导。

Answer 1

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

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

如果要使用此功能，必须避免完全渲染组件，直到道具收到“正确”值为止。

乍一看似乎很奇怪，但是当您考虑它时，这是有道理的。最初呈现后，API并不想冒险承担用户采取的覆盖动作，并且会意外地关闭或打开对话框。可能会锁定面板。

Answer 2

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

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

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

Answer 3

这里的问题是<Grid item ... />父视图中<Grid container />元素上的键没有更改。

以其他类型执行搜索时，将显示相同的数据，只是显示方式不同。

据我了解，如果react看到具有相同数据的相同键，则即使需要将状态作为道具传递给孩子，也不需要重新渲染。在我的情况下，状态作为道具通过<Grid item ... />传递给孩子。

作为解决方案，我将搜索类型附加到键上。因此，现在当搜索类型更改时，保存结果的键也将更改，并且<Grid item ... />的子级将被触发以重新呈现。

很抱歉，不是最好的解释，我对ReactJS有一些实践经验，但是我不能从“幕后”的角度来谈论它。

默认情况下，Google Material的ReactJS ExpansionPanel不扩展

3 个答案: