将组件放在.jsx文件中，而不是通过.css文件

Question

我正在寻找一个解决方案如何在.jsx-file而不是.css-file中定位组件，因为我有多个相同组件的文件，但每个文件都负责不同的任务，所以我需要它们在页面的不同位置。

我不想只使用css类的微小更改来拥有同一文件的多个副本 - 我宁愿添加更改到.jsx-file，或者如果你知道如何使用.css-file实现这一点，请告诉我。

例：

我有一个'鱼'文件，它给出了鱼的基本结构。我必须制作多个鱼文件（即fish.jsx，fish1.jsx，fish2.jsx），因为它们各自使用不同的css类进行定位。如何通过添加原始的fish.jsx或.css-file将Fish.jsx的数量减少到一个？

Answer 1

我接近你问题的方式就是这样的

import Fish from './Fish';
import './Fish.css';

// other stuff

const FishContainer => (
  {[...Array(10)].map( (_, i) => <Fish className=`fish-${i}` /> )}
);

export default FishContainer;

并在您的CSS文件中

.fish {
  &-1 {}
  &-2 {}
  // etc
}