使用 cloneElement 向孩子添加 onClick 道具答案

【问题标题】：Adding onClick prop to children using cloneElement使用 cloneElement 向孩子添加 onClick 道具
【发布时间】：2021-03-08 02:12:34
【问题描述】：

我正在尝试创建一个图像库组件，该组件显示小缩略图图像和更大的图像“预览”。预览将替换为当前选定的缩略图。

该组件允许将任意数量的缩略图作为子项传入，然后使用 cloneElement 将 onClick 道具添加到每个缩略图中。这工作正常，我可以在控制台中看到新的道具，但是单击图像后什么也没有发生。到目前为止，这是我的代码：

家长

<Gallery>
  {gallery.map((thumbnail) => {
    return (
      <Image fluid={thumbnail.asset.fluid} />
    );
  })}
</Gallery>

儿童

const Gallery = (props) => {
    
  const [thumb, setThumb] = useState({
    preview: null,
  });

  const thumbnails = React.Children.map(props.children, (child) =>
    React.cloneElement(child, {
      onClick: () => {
        console.log("Clicked!")
        setThumb({
          preview: child.asset.fluid,
        });
      },
    })
  );
    
  return (
    <section>
      <div className={preview}>
        <Image fluid={preview} />
      </div>
      <div className={thumbnails}>
        {thumbnails}
      </div>
    </section>
  );
};

export default Gallery;

我不确定为什么单击缩略图时我没有得到任何响应（即使在控制台中）。

这是我第一次使用 React，如果这是一个糟糕的方法，请告诉我是否有更简单/更好的方法。

【问题讨论】：

Image 组件会将它作为props.onClick 获取，它不会被自动拾取为事件侦听器，如果您不拥有Image，您可能想要将它包裹在某些东西上这将添加onChick={props.onClick}
@NadiaCibrikova 非常感谢，这解决了问题！
很高兴它对你有用！

标签： reactjs gatsby

【解决方案1】：

按照Nadia Chibrikova 的建议，我可以通过将<Image> 组件包装在<div> 中来解决此问题：

家长

<Gallery>
  {gallery.map((thumbnail) => {
    return (
      <div>
        <Image fluid={thumbnail.asset.fluid} />
      </div>
    );
  })}
</Gallery>

【讨论】：