Next.js/React 项目上的组件不会 return 错误

Question

我有一个图像滑块组件，我正在使用 Nextjs/React 和 Emotion。

我觉得我做的一切都很好！但是我仍然遇到古老的错误...

Error: ImageSliderContainer(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

这是组件...

import ReactDOM from "react-dom";
import ImageSlider from "./ImageSlider";

const images = [
  "https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
  "https://images.unsplash.com/photo-1470341223622-1019832be824?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2288&q=80",
  "https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80",
  "https://images.unsplash.com/photo-1534161308652-fdfcf10f62c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2174&q=80",
];

const ImageSliderContainer = () => {
  <ImageSlider slides={images} />;
};

export default ImageSliderContainer;

如果您需要查看其他组件，请在评论中告诉我。我真的希望我错过的只是一些愚蠢的东西。

谢谢！

Answer 1

错误来了，因为你没有返回任何东西。只需将其替换为：

const ImageSliderContainer = () => {
  return <ImageSlider slides={images} />;
};

Answer 2

您没有在 ImageSliderContainer 组件中 returning 任何内容。只需添加 return 语句，它应该可以工作！

const ImageSliderContainer = () => {
  return <ImageSlider slides={images} />;
};

希望对您有所帮助！

Next.js/React 项目上的组件不会 return 错误

Component nothing to return error on a Next.js/React project

javascript

emotion

reactjs

next.js