Компонент Material-ui-next инициализируется как скрытый

Я только что перешел с бета-версии материала на новый материал-интерфейс-текст rc1. Он компилируется и отлично работает, ожидая, что компоненты инициализированы с видимостью свойства css, установленным на скрытый с помощью различных классов css, которые применяются к компонентам. Я попробовал как компонент диалога (как в примере ниже), так и компонент всплывающего окна. Тот же результат. Оба скрыты при запуске.

К компоненту диалога применяется этот класс .MuiModal-hidden-224. Мне кажется неправильным, что компонент инициализирован как скрытый. Это HTML корня модального окна:

<div class = "MuiModal-root-223 MuiDialog-root-216 MuiModal-hidden-224" role = "dialog">

Это код реакции, который я использую.

   import * as React from "react";
import "./SharingDialog.less";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";

interface IProps {
    locked: boolean
}

interface IState {
    open: boolean;
    anchorEl: any;
}

export default class SharingDialog extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props);
        this.state = {
            open: false,
            anchorEl: null
        }
    }

    handleOpen = (event:any) => {
        this.setState({open: true, anchorEl: event.currentTarget});
    }

    handleClose() {
        this.setState({open: false})
    }

    render() {
        const { locked } = this.props;

        return (
            <div className = "sharing-dialog">
                <Button>Test</Button>
                <button disabled = {!locked} className = "btn btn-primary" onClick = {(event) => this.handleOpen(event)}>Open modal</button>
                <Dialog
                open = {this.state.open}>                    
                    <div className = "sharing-dialog-component">
                        Testing
                    </div>

                </Dialog>
            </div>
        )
    }
}

Что я делаю неправильно? Почему модальное окно запускается как скрытое?

как насчет изменения состояния по умолчанию open на true!

Fadi Abo Msalam 17.05.2018 13:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
7
1
763
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я была такая же проблема. Похоже, обновление до React 16.3.2 решит проблему.

https://github.com/mui-org/material-ui/issues/11414

Чтобы быть более конкретным, необходимо обновить пакет NPM response-dom до версии 6.3.x, чтобы устранить проблему.

Poku 18.05.2018 20:19

Другие вопросы по теме