React Image OnClick在另一个组件中显示

Question

是否可以单击组件中的一个图像，并在另一个组件中显示相同的图像和信息？我的想法是空白的，我已经在寻找答案已经很长时了。

我创建了一个显示多个图像的组件。我还创建了3个单独的组件，我想根据第一个组件中单击的图像显示图像和一些文本。我已经考虑过为每个图像的路由和创建组件，但认为该方法不是有效的...

预先感谢您！

这是主要组成部分：

import React from 'react';
import './app.css';
import ImageSection from './image_section';
import PaneOne from './pane_1';
import PaneTwo from './pane_2';
import PaneThree from './pane_3';

const App = () => (
    <div className="main_section">
        <div className="top_pane_area">
            <PaneOne />
            <PaneTwo />
            <PaneThree />
        </div>
        <div className="bottom_image_area">
            <ImageSection />
        </div>
    </div>
);
export default App;

这是我希望显示图像的所有三个组件（目前；所有三个组件都是相同的）：

import React, { Component } from 'react';
import './app.css';

class PaneOne extends Component {
    render () {
        return (
            <div className="panes">
            </div>
        )
    }
}
export default PaneOne;

这是图像（目前）的组件：

import React, { Component } from 'react';
import './app.css';
import one from './imgs/one.jpg';
import two from './imgs/two.jpg';
import three from './imgs/three.jpg';
import four from './imgs/four.jpg';
import five from './imgs/five.jpg';
import six from './imgs/six.jpg';

class ImageSection extends Component {
    render() {
        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} />
                    <img className="prof_pic" src={two} />
                    <img className="prof_pic" src={three} />
                    <img className="prof_pic" src={four} />
                    <img className="prof_pic" src={five} />
                    <img className="prof_pic" src={six} />
                </div>
            </div>
        )
    }
}
export default ImageSection;

Answer 1

使父组件发送一个由孩子组件（带有图像的一个）接收的函数，然后单击图像将将信息发送回信息功能。这将允许儿童父母交流，还可以使您发送任何其他参数以进行自定义逻辑。然后，父函数可以设置为设置或您想要的任何内容，具体取决于从图像上的单击事件中继的信息。

class App extends Component{
    constructor(props){
        super(props);
        // set the state to handle which of the panes displays the information you want
        this.image_clicked = this.image_clicked.bind(this);
    }
    render(){
        return (
            <div className="main_section">
                <div className="top_pane_area">
                    <PaneOne />
                    <PaneTwo />
                    <PaneThree />
                </div>
                <div className="bottom_image_area">
                    <ImageSection image_clicked={this.image_clicked}/>
                </div>
            </div>
        )
    }
    image_clicked(source){
        // Based on the source or any additional parameter you send do any re-render logic
        // example:
        if (source == 'image1.png'){
            this.setState({pane1 : source});
        }
    }
}
class ImageSection extends Component {
    render() {
        let image_clicked = this.props.image_clicked;
        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} onClick={() => image_clicked(one)}/>
                </div>
            </div>
        )
    }
}