Javascript 如何通过react中同级组件上的单击事件在另一个组件中加载映像

我是react新手，希望有一个基本的react应用程序。我有两个兄弟组件。在一个组件（ImagePreview）中，我有一个显示为缩略图列表的图像列表。我还有另一个组件（ImageReal），我想在其中显示一个全比例图像

我想更新ImageReal的状态，这样当单击ImagePreview组件中的图像时，它会更新ImageReal中的状态，并且该图像将显示在ImageReal中。我看了很多例子，但我无法理解可能是b/c，我对这种东西是新手

import React from 'react';
import './styles/app.css';
import ImagePreview from './components/ImagePreview'
const ImageList = [{imagePreview: "/image/image1.jpg"},{imagePreview: "/image/image2.jpg"},{imagePreview: "/image/image3.jpg"}];
function App() {
  return (
    <div className="flex mb-4">
  
      <div className="w-1/4 bg-gray-400 h-screen mx-2 my-1">
       { ImageList.map(image => (
    
       <ImagePreview key={image.id} image={image} ></ImagePreview>
    
      ))}
     </div>
    <div className="w-3/4 bg-gray-500 h-screen  mx-2 my-1">

    </div>

 </div>
 );
}

export default App;

从“React”导入React；
导入“./styles/app.css”；
从“./components/ImagePreview”导入ImagePreview
const ImageList=[{imagePreview:“/image/image1.jpg”}，{imagePreview:“/image/image2.jpg”}，{imagePreview:“/image/image3.jpg”}]；
函数App（）{
返回(
{ImageList.map（图像=>(
))}
);
}
导出默认应用程序；

图像预览组件

 import React from 'react'

  const ImagePreview = ({ image }) => {

  let helloWorld = (e) => {
   console.log('Hello world :', e.target);
   }

return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" onClick={helloWorld}/>
    
  </div>
);
}

export default ImagePreview

import React from 'react'

const ImageReal = ({ image }) => {

return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" />
    
  </div>
);
}

export default ImageReal

从“React”导入React
常量ImagePreview=（{image}）=>{
让helloWorld=（e）=>{
log（'helloworld:'，e.target）；
}
返回(
);
}
导出默认图像预览

ImageReal组件

 import React from 'react'

  const ImagePreview = ({ image }) => {

  let helloWorld = (e) => {
   console.log('Hello world :', e.target);
   }

return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" onClick={helloWorld}/>
    
  </div>
);
}

export default ImagePreview

import React from 'react'

const ImageReal = ({ image }) => {

return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" />
    
  </div>
);
}

export default ImageReal

从“React”导入React
常量ImageReal=（{image}）=>{
返回(
);
}
导出默认ImageReal

如果您希望这两个组件彼此交互，那么最好在一个公共父-祖先组件中管理状态

有关更多信息，请参阅此链接：

---

我认为你必须通过这样的

所以在图像预览组件中，你必须直接将这样的

放在你的应用程序组件中，你可能想要使用状态：并使一个状态为“realVisible”/“realVisible”，其中状态要么是0-没有完整大小的图像，要么是一些相应的完整大小的图像。然后，有条件地渲染-如果realVisible，则显示realVisible th ImageReal。单击后，只需将状态更新为适当的值（单击预览时图像的索引，单击大图像时为0）。这有帮助吗？我是否正确理解了您的问题，或者您是否需要更多信息/完整答案或代码？