Юрий Королик's questions

请帮帮我。我不明白如何打开带有元素的模式窗口。有一个数组可以在组件中生成不同数量的元素（从 4 到 10），并且每个元素都应该有一个模态查看器窗口。我使用 map() 创建所需数量的元素，然后...

 import React, { Component } from "react";
 import Modal from "react-modal";

 class General extends React.Component {
constructor(){
    super();
    this.state = {
        modalIsOpen: false
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
}

openModal() {
    this.setState({modalIsOpen: true});
}


closeModal() {
    this.setState({modalIsOpen: false});
}

render() {

    return(
        <div className="general">
            {this.props.filteredBooks.map((item, index) =>
            <div className="book-item" key={index}>
                <div className="size-bg" onClick={this.openModal}>
                    <img src={item.Image}/>
                </div>
                <h3>{item.Name}</h3>
                <p>{item.Author}</p>
                <div className="rating" key={index}>
                    <img src={item.ImageRating} />
                </div>
            </div>
            )}
            <Modal
                isOpen={this.state.modalIsOpen}
                ariaHideApp={false}
                className="Modal-book"
                overlayClassName="Overlay-book"
            >
                <div className="image-modal">
                </div>
                <button onClick={this.closeModal}>Закрыть модальное окно</button>
            </Modal>
        </div>
    )
}


}

导出默认General；

一切正常，但图像在那里总是一样的，我需要根据被按下的元素以某种方式改变它

我不知道如何分类书籍。在父块中，我创建了一个包含所有这些书籍的数组，然后我不明白如何单击按钮（其中有 4 个，每个都以自己的方式修改数组：一个完整​​显示它，第二个按评级排序，第三个按受欢迎程度排序，第四个仅显示免费书籍）在一个子组件中，将此修改后的数组传递给另一个子组件。我是新手，还不知道如何实现它......

我需要child通过方法修改组件中的数组onClick，将其传递给父组件，并从父组件传递给另一个child组件。