Как отправить изображение в детстве с помощью портала React? - PullRequest
0 голосов
/ 26 сентября 2019

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

Я использую машинопись и React-Redux.В основном я следовал примеру использования React-Portals, опубликованном Дэвидом Гилбертсоном здесь .

import PopupWindow from "./PopupWindow";
import Pizza from '../../../Images/pizza.jpg'

class Assessment extends React.Component<Props, any> {
    constructor(props: Props) {
        super(props);

        this.state = {
            isImagesOpen: false,
            imageOne: Pizza
        };

        this.togglePopupWindow = this.togglePopupWindow.bind(this);
        this.closePopupWindow = this.closePopupWindow.bind(this);
    }

    // switch the toggle
    togglePopupWindow() {
        let flip = !this.state.isImagesOpen;
        this.setState({ isImagesOpen: flip });
    }

    // explicitly close the window
    closePopupWindow() {
        this.setState({ isImagesOpen: false });
    }

render() {
        return (
            <React.Fragment>
                    ...
                       // image here displays fine 
                       <div>
                           <img src={this.state.imageOne} alt="Pizza" />
                       </div>
                        <button onClick={ this.togglePopupWindow } >
                            Click Me!
                        </button>
                        {
                            this.state.isImagesOpen && (
                                <PopupWindow closePopupWindow={this.closePopupWindow}>
                                    //image here (same as above) does not show in the window
                                    <img src={this.state.imageOne} alt="Pizza" />
                                    <div>The Variant Images!</div>
                                </PopupWindow> )
                        }
                    ...
            </React.Fragment>
        );
    }

Изображение, которое отправляется на портал, не отображается (альтернативатекстовые дисплеи).То же изображение отображается нормально при визуализации компонентом оценки, а не через компонент портала (всплывающее окно).

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...