如何正确使用“问题”而不创建多个文件

Question

我可能在这里不了解实际功能。但是想像一下，我想使用react组件来完成以下操作（仅作为示例）：

• 我在网页顶部使用div来显示宽屏图片。我想为此创建一个反应组件
• 该组件现在可能非常简单，返回一个带有类和ID的div。我希望班级成为一名道具。因为我将URL设置为CSS中的图像，因此使用了不同的类。
• 这意味着，我希望该组件显示在我的多个站点中，例如index.html，contact.html等。在每个站点，className必须不同。

假设我在组件内部使用了

<div className="{props.class}" id="image-display-yellow-transition"></div>´´´
´´´
I then create an element with the various probs (classNames). Then I render it with:


ReactDOM.render(
  element,
  document.getElementById('root')
);

问题是...对我来说，感觉每个组件（每个站点，例如index.html，contacts.html等）都需要一个不同的.js文件。或者我在这里缺少什么？我可以创建一个组件并在index.html上实现脚本标签。但是在contacts.html上，我需要引用其他.js文件，因为我需要更改概率？