Я хочу отобразить несколько изображений в новом окне одним нажатием кнопки.Эти изображения будут получены из базы данных с другими данными.
Я использую машинопись и 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>
);
}
Изображение, которое отправляется на портал, не отображается (альтернативатекстовые дисплеи).То же изображение отображается нормально при визуализации компонентом оценки, а не через компонент портала (всплывающее окно).
Я мог бы предоставить код, используемый для всплывающего окна, но он похож на предоставленную ссылку, и само окно работает нормально.
В конечном счете, изображение будет не статическим, а импортируемым.нескольких изображений, которые извлекаются из базы данных и должны отображаться в отдельном окне для задачи, выполняемой в главном окне.