画像をクリックすると他のコンポーネントに表示されますか？

Question

コンポーネント内の1つのイメージをクリックして、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; 

これは私が画像を希望すべての3つのコンポーネントを表示するものである（現時点では、3つのすべてのコンポーネントが同一である）：

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

tコンポーネントは、子コンポーネント（画像を持つコンポーネント）によって受け取られる関数を送信し、画像をクリックすることによって関数上の親に情報を返します。これにより、子供たちはコミュニケーションを親にすることができ、カスタムロジックのための追加パラメータを送信することもできます。親関数は、画像のclickイベントから中継される情報に応じて、任意のものをsetStateまたは任意のものにすることができます。

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