Укажите / установите ширину и высоту в модальном режиме реакции-ускорения

Как я могу применить динамическую ширину и высоту к модальному окну реакции-загрузки? Я проверил документы по реактивной загрузке здесь, но не смог понять, как это сделать что. На самом деле значение реквизита ширины и высоты будет динамическим (могут быть любые значения), так как это будет многократно используемый компонент в моем приложении (для использования на многих страницах), поэтому он не может применять ширину/высоту через какой-либо класс CSS.

Свойство bsSize, как указано в документах, также не работает, хотя предопределенные размеры xs, md, lg - это не то, что мне нужно, скорее мне нужно, чтобы ширина и высота устанавливались в модальном режиме через реквизиты.

Вот мой пример кода JSX:

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);

jsx react-bootstrap size
person Faisal Mq    schedule 17.09.2015    source источник

Ответы (1)


arrow_upward
20
arrow_downward

Согласно его документации, вам необходимо настроить свой собственный класс css для достижения стиля вы хотите через модальную опору dialogClassName.

Таким образом, у нас может быть код my.jsx ниже:

<Modal dialogClassName="my-modal">
</Modal>

С my.css ниже:

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
}

Тогда у вас будет свой настроенный модал!

person Qi W.    schedule 13.03.2016
comment
Но для этого мы должны статически определить CSS в каком-то файле CSS, тогда как в моем случае ширина/высота будут динамическими через реквизиты. Так что это не решает нашу проблему. - person Faisal Mq; 13.03.2016
comment
Что ж, возможно ли, что мы могли бы использовать JQuery или что-то еще для динамического изменения стиля класса (например, my-modal здесь)? - person Qi W.; 14.03.2016
comment
Это можно сделать, но это требует дополнительных усилий, и разработчики React-Bootstrap должны обеспечить это сами, а не мы, разработчики, которые тянут рукава и сами ищут какой-то обходной путь. - person Faisal Mq; 14.03.2016
comment
@Stephen W - я обнаружил, что если я устанавливаю ширину с помощью dialogClassName, мне нужно использовать !important, чтобы переопределить стиль модального диалога BS - person Cathal; 25.01.2017
comment
Обратите внимание, что если для какого-то модального блока была указана максимальная ширина, то ширина будет соответствовать значению максимальной ширины, даже если вы установите !important. Вы также должны переопределить значение максимальной ширины, если оно есть. - person Alex; 09.10.2017
comment
Это только частичный ответ, это не способ установить высоту. - person shinzou; 23.08.2018
comment
Я попытался добавить собственное className с помощью dialogClassName, но получаю сообщение об ошибке ‹Modal.Dialog dialogClassName='dialogCustomClass'› React не распознает реквизит dialogClassName в элементе DOM. Если вы намеренно хотите, чтобы он отображался в DOM как настраиваемый атрибут, вместо этого напишите его как dialogclassname в нижнем регистре. Если вы случайно передали его из родительского компонента, удалите его из элемента DOM. - person sk215; 10.03.2020
comment
Согласно комментарию, оставленному @Cathal, мне тоже нужно было указать !important - person pooley1994; 23.07.2021