Блог

Я создаю приложение ReactJS, используя Material-UI от Google.

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

Вот класс, который отображается в родительском компоненте:

Логическое значение 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, моем пользовательском классе, я передаю prop с именем 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. Она расширяется при нажатии и по умолчанию свернута, однако при изменении типа поиска на что-то, что должно вызывать расширенные панели по умолчанию, это не работает.

Я ценю любые рекомендации.

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

Если она не определена или имеет значение по умолчанию при первоначальном рендеринге, то она будет использоваться даже при изменении значения this.props.expandByDefault ; ее просто игнорируют.

Вам следует вообще избегать рендеринга компонента, пока prop не получит «правильное» значение, если вы хотите использовать эту функцию.

На первый взгляд это кажется странным, но если подумать, в этом есть смысл. После первоначального отображения API не хочет рисковать перезаписью действий, выполняемых пользователем, и случайно закрывать или открывать диалоговое окно против чьей-либо воли. Вероятно, это заблокировало бы панель.

defaultExpanded Свойство определяет только состояние компонента по умолчанию, т.Е. следует ли расширять панель при ее первом отображении. Последующие изменения этого значения не повлияют на то, расширена панель в данный момент или нет.

Чтобы заставить панель расширяться или сворачиваться в ответ на изменения в вашем приложении, вам необходимо использовать expanded свойство. Из документов:

Если true , панель расширяется, в противном случае сверните ее. Установка этого реквизита позволяет управлять панелью.

Проблема здесь в том, что ключи, которые находятся на <Grid item ... /> элементах в <Grid container /> родительском представлении, не меняются.

Когда поиск выполняется с другим типом, отображаются те же данные, просто отображаются по-другому.

Насколько я понимаю, если react видит тот же ключ с теми же данными, ему не нужно повторно отображать, даже если есть состояния, передаваемые дочерним элементам в качестве реквизитов. В моем случае состояния передаются в качестве реквизитов дочерним элементам в <Grid item ... /> .

В качестве разрешения я добавляю тип поиска к ключу. Итак, теперь при изменении типа поиска изменяется и ключ, содержащий результат, и дочерние элементы <Grid item ... /> запускаются для повторного отображения.

Извините за не лучшее объяснение, у меня есть некоторый практический опыт работы с ReactJS, но я не могу так хорошо говорить об этом с точки зрения «под капотом».