使用配置对象消除多分支结构

在Javascript设计模式中已经有这个原理了，使用分支关键词和对象的键做匹配，把多分支结构的判断或者切换消除掉
实现BootStrap颜色配置

const Color={primary:"palevoletred",success:'blue',info:'green',danger:'yellow',normal:'white'}

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.color ? Color[props.color] : Color.normal};
  color: ${props => props.color ? Color.normal : Color[props.color]};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button color="success">Primary</Button>
    <Button color="info">Info</Button>
    <Button color="danger">Danger</Button>


  </div>
);