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接收的函数，并通过单击图像将信息发送回函数的父组件。这将允许子进行父进程通信，并允许您发送自定义逻辑的任何其他参数。然后，父函数可以设置State或任何您想要的内容，具体取决于从图像上的click事件中继的信息。

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

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

1 个答案: