reactjs 在Next js/React中，如何将div和变量从子组件返回到父组件？

t98cgbkg 于 2023-03-08 发布在 React

关注(0)|答案(2)|浏览(126)

我想构建一个webapp，当点击子组件生成的列表中的一个项目时，它会在父组件的div中显示图像。我认为最好在子组件中生成列表，因为它是动态的。现在，我已经将列表生成并作为div发送回父组件。但是如何包含一个指向被点击图像的变量（例如ID）呢？
是否有必要将整个图像列表发送到子组件，并在那里生成列表？甚至有必要将整个main保存在一个组件中？我对React/ NextJS相当陌生，因此我真的需要一些指导。以下代码可以给予您了解所发生的事情：
简化的父组件：

import Paintings from "./components/Paintings";

export default function Gallery() {

    var images = require('/public/gallerij.json');
    // Json file with this structure:
    [
  {
    "Number": 1,
    "Title": "Moments of Magic",
    "Size": "70x50cm",
    "Paint": 1,
    "Sold": 1
  },
  {
    "Number": 2,
    "Title": "The lady in red",
    "Size": "70x50cm",
    "Paint": 1,
    "Sold": 0
  }]

    return (
            <main>
                <div className='left-main'>
                    <header className='top-section'>
                        <h3 className='top-section-text'>Select a painting:</h3>
                    </header>
                    <div className='painting-list'>
                        {images.map(block => Paintings(block))}
                    </div>
                </div>
                <div className='right-main'>
                    <div className='gallery-image'>
                        // DISPLAY image here based on variable from Paintings
                    </div>
                </div>
            </main>
    )
}

简化的子零部件：

export default function Block(props) {

    return (
        <div className='painting-list-item' key={props.Number} value={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>
    )
}

希望你们能给我指出正确的方向，提前谢谢你们！

reactjs

来源：https://stackoverflow.com/questions/75663738/how-do-i-return-a-div-and-a-variable-from-a-child-component-to-a-parent-componen

2条答案

按热度按时间

vqlkdk9b1#

我认为，在.map函数中，首先您希望将组件定义为<Paintings { ...block />而不是Paintings(block)，此外，传递单击的卡片和索引的方式是通过传递函数，因此创建一个类似onDelete(index) { console.log(index) }的函数，并将其传递给类似<Paintings { ...block } onDelete={ onDelete } />的组件，现在它作为prop传递，在Paintings组件中，您可以调用此函数具有传递给块的索引，例如onDelete(props.Index)，并且它将调用父组件中的函数。

赞(0）回复(0）举报 2023-03-08

1szpjjfi2#

我会创建某种状态来跟踪应该显示哪个绘画。以及一个派生变量来保存当前选择的绘画。

const [activePaintingId, setActivePaintingId] = useState(null);

const currentPainting = images.find(
  (image) => image.Number === activePaintingId
);

然后，第一个选项可以是将Paintings Package 到div元素中，并在那里应用onClick。

<div className="painting-list">
  {images.map((block) => (
    <div onClick={() => setActivePaintingId(block.Number)}>
      <Paintings {...block} />
    </div>
  ))}
</div>

在那里你可以像这样访问当前的绘画。

<div className="gallery-image">
  {activePaintingId !== null ? (
    // DISPLAY image here based on variable from Paintings
  // {currentPainting}
  ) : null}
</div>

第二种方法是，如果你不想让另一个div包围你的paining，那么就把函数传递给子函数。

<div className="painting-list">
  {images.map((block) => (
    <Paintings {...block} setActivePaintingId={setActivePaintingId} />
  ))}
</div>

然后在子节点中添加onClick

export default function Paintings(props) {
  return (
    <div
      className="painting-list-item"
      key={props.Number}
      value={props.number}
      onClick={() => setActivePaintingId(props.Number)}
    >
      ...
    </div>
  );
}

和显示图像将相同。
此外，您不应在div上设置value属性，因为value不是有效属性，请参见MDN div attributes。

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs 在Next js/React中，如何将div和变量从子组件返回到父组件？

2条答案

相关问题

热门标签

最新问答