Javascript 如何渲染同一组件的不同布局？

我正在建设一个音频播放器，我希望它有不同的布局。我实现了我想要的，但我想知道是否有更好的方法：

因此，我的PlayerComponent中的渲染方法如下所示：

// ** PlayerComponent.js

render() {
    const { playerStatus, duration, position, track, volume, isLoaded, queue } = this.state;
    const showDock = { height: '100px', margin: '0px'};
    const audioPlayerProps = {
      ...
      playerStatus: playerStatus,
      duration: duration,
      position: position,
      track: track,
      volume: volume, 
      isLoaded: isLoaded,
      queue: queue,
      showDock: showDock,
      ...
    };

      switch( this.mode ) {
        case 'Single':
          return <SinglePlayer {...audioPlayerProps} />
        case 'Playlist': 
          return <PlaylistPlayer {...audioPlayerProps} />
        case 'Dock': 
         return <DockPlayer {...audioPlayerProps} />
      }
    }

//**PlayerComponent.js
render（）{
const{playerStatus，duration，position，track，volume，isLoaded，queue}=this.state；
const showDock={height:'100px'，margin:'0px'}；
常数audioPlayerProps={
...
playerStatus:playerStatus，
持续时间：持续时间，
职位:职位,，
轨道：轨道，
卷：卷，
isLoaded：isLoaded，
队列：队列，
showDock:showDock，
...
};
开关（此模式）{
“单一”情况：
返回
案例“播放列表”：
返回
案件“被告席”：
返回
}
}

我有条件地渲染播放器取决于当前播放器模式。我将道具从PlayerComponent传递到不同的玩家模板

我的示例播放器模板：

// ** SinglePlayerTemplate.js

import ...
import ...
import ...
import ...

const SinglePlayerTemplate = (props) => {
  return (
    <div>
      {props.isLoaded && props.queue.length !== 0 ? (
        <div className={`AudioPlayer${props.mode}`}>
          <Thumbnail />
          <div className={`AudioPlayer${props.mode}-controls`}> 
            <Track track={props.track} />
            <PlayerNavigation
              ... 
              togglePlayer={props.togglePlayer}
              playerStatus={props.playerStatus}
              skipToPreviousTrack={props.skipToPreviousTrack}
              track={props.track}
              disabledNext={props.disabledNext}
              disabledPrev={props.disabledPrev}
              mode={props.mode}
              ...
            />
            <BrandLogo />
            <PlayerOptions 
              ...
              setVolume={props.setVolume}
              setSpeed={props.setSpeed}
              ...
            />
            <Link />
          </div>  
        </div>
      ) : (
        <div className={`AudioPlayer${props.mode}-loader`}>Loading...</div>
      )}
    </div>
  );
}

export default SinglePlayerTemplate;

//**SinglePlayerTemplate.js
导入。。。
导入。。。
导入。。。
导入。。。
常量SinglePlayerTemplate=（道具）=>{
返回(
{props.isLoaded&&props.queue.length！==0(
) : (
加载。。。
)}
);
}
导出默认的SinglePlayerTemplate；

当我创建其他模式的播放器时，所有的模板共享相同的代码，这让我觉得是多余的。因为如果我将有10种不同的模式的球员，我想传递一个额外的道具给球员，我需要写在10个不同的地方。想知道是否有更好的方法来渲染具有不同布局的相同组件

---

谢谢

重复使用React组件始终是一个很好的做法。对于您的用例，您可以创建一个玩家组件，并根据您的需求传递道具，如等。 播放器类型-单曲、播放列表等

---

然后，您可以在播放器组件中处理这些道具，并相应地编写特定于用例的代码。这将有助于重用组件并避免冗余。

重用组件始终是一种良好的做法。对于您的用例，您可以创建一个玩家组件，并根据您的需求传递道具，如等。 播放器类型-单曲、播放列表等

---

然后，您可以在播放器组件中处理这些道具，并相应地编写特定于用例的代码。这将有助于重用组件并避免冗余。

您可以提供代码链接（github）吗？您可以提供代码链接（github）吗？