针对特定的开关盒

Question

我正在尝试创建一个通用模板函数，该函数将充当应用程序的布局实用程序。我计划根据需要在左侧和右侧列中插入内容。我正在努力寻找一种针对特定开关案例的方法。

function Template({state, props}) {
  switch(state) {
    case 'halfhalf':
        return 
        <div className="halfhalf">
          <div className="SplitPane-left">
            {props.left}
          </div>
          <div className="SplitPane-right">
            {props.right}
          </div>
        </div>;
    case 'sixfour':
        return 
          <div className="sixfour">
            <div className="SplitPane-left">
              {props.left}
            </div>
            <div className="SplitPane-right">
              {props.right}
            </div>
          </div>;
    default:
        return null;
  }
}

这就是我计划使用它的方式：

function About() {
  return (
    <div>
      <h1>About</h1>
      <Template 
        left={
          <h1>This is it Left column</h1>
        }
        right={
          <h1>This is it Right column</h1>
        }
      />
    </div>
  );
}

谢谢！