Next.js/React中子组件向父组件传递点击项ID与元素的方法

你不需要把完整图片列表传给子组件，也不用合并组件，保持父子组件拆分是合理的。核心思路是父组件维护选中状态，通过回调函数接收子组件传递的点击项ID，具体实现步骤如下：

1. 父组件添加状态管理与点击回调 #

在父组件中使用useState保存当前选中的图片编号，同时定义处理子组件点击的函数来更新状态：

import { useState } from 'react';
import Paintings from "./components/Paintings";

export default function Gallery() {
    // 用useState管理选中的图片编号，初始值设为第一个图片的Number或null
    const [selectedPaintingNumber, setSelectedPaintingNumber] = useState(1);
    const images = require('/public/gallerij.json');

    // 接收子组件传来的编号，更新选中状态
    const handlePaintingClick = (number) => {
        setSelectedPaintingNumber(number);
    };

    return (
            <main>
                <div className='left-main'>
                    <header className='top-section'>
                        <h3 className='top-section-text'>Select a painting:</h3>
                    </header>
                    <div className='painting-list'>
                        {/* 用JSX语法渲染子组件，传递回调函数和所有图片属性 */}
                        {images.map(block => (
                            <Paintings 
                                key={block.Number} 
                                {...block} 
                                onPaintingClick={handlePaintingClick} 
                            />
                        ))}
                    </div>
                </div>
                <div className='right-main'>
                    <div className='gallery-image'>
                        {/* 根据选中的编号渲染对应图片 */}
                        {selectedPaintingNumber && (
                            <img 
                                src={`/images/${selectedPaintingNumber}.jpg`} 
                                alt="Selected painting"
                            />
                        )}
                    </div>
                </div>
            </main>
    )
}

2. 子组件添加点击事件触发回调 #

在子组件的列表项容器上绑定onClick事件，调用父组件传递的回调函数并传入当前图片的Number：

export default function Block(props) {
    return (
        <div 
            className='painting-list-item' 
            onClick={() => props.onPaintingClick(props.Number)}
        >
            <div className='title-list-item'>
                <h2>{props.Title}</h2>
            </div>
            <div className='sold-list-item'>
                <p className={`${props.Sold ? "sold" : "not-sold"}`}>{props.Sold ? 'Sold' : 'Available'}</p>
            </div>
            <div className='size-list-item'>
                <p>{props.Size}</p>
            </div>
            <div className='image-list-item'>
                <img className="painting-list-item-img" src={`/images/${props.Number}.jpg`} width={50} height={50}/>
            </div>
        </div>
    )
}

关键说明 #

• 父组件通过useState维护状态是React组件间状态传递的标准方式，确保状态的可追踪性
• 子组件只需负责触发点击事件并传递数据，不需要关心父组件的逻辑，符合组件解耦原则
• 注意父组件渲染子组件时必须用JSX语法（<Paintings />），直接调用Paintings(block)无法正确创建React组件实例
• 如果初始不想显示图片，可将useState初始值设为null，渲染图片时增加非空判断即可

内容的提问来源于stack exchange，提问作者Nomeon