反应图像onClick以显示在另一个组件中？

Question

是否可以单击组件中的一个图像并让该 onClick 在另一个组件中显示相同的图像和信息？我的脑子一片空白，我一直在寻找答案。

我创建了一个显示多个图像的组件。我还创建了 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

使父组件发送一个函数，该函数将由子组件（带有图像的组件）的 props 接收，并通过单击图像将有关该函数的信息发送回父组件。这将允许孩子与父母交流，还允许您为自定义逻辑发送任何附加参数。然后父函数可以设置状态或任何你想要的，这取决于从图像上的点击事件传递的信息。

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>
        )
    }
}