J'utilise l'instruction switch à l'intérieur d'un fichier de réaction .Getting Expression Expected error in first case line.

export default ({handle, state}) => (
  <div style={styles.container} >
    <h3 style={{margin: 0, marginBottom: 15}}>InputData</h3>
    {items.map((item) => (
      <div style={styles.lineContainer}>
        switch(item.name){
          case "name1": return <InputBox/>;
          case "name2": return <SelectBox/>;
          case "name3": return <<SelectBox/>;/>;
          default: return <InputBox/>
        }
      </div>
    ))}
  </div>
);
4
JokerBean 19 mars 2019 à 12:32

2 réponses

Meilleure réponse

Si vous souhaitez insérer une instruction switch, vous devez l'enfermer dans un IIFE.

export default ({handle, state}) => (
  <div style={styles.container}>
    <h3 style={{margin: 0, marginBottom: 15}}>InputData</h3>
    {items.map((item) => (
      <div style={styles.lineContainer}>
        {(() => {
          switch(item.name) {
            case "name1": return <InputBox/>;
            case "name2": return <SelectBox/>;
            case "name3": return <SelectBox/>;
            default: return <InputBox/>
          }
        })()}
      </div>
    ))}
  </div>
);
12
Ben Fortune 19 mars 2019 à 09:38

Vous devez utiliser votre instruction switch dans une fonction. De plus, pour des raisons de clarté, vous feriez mieux d'essayer de garder une logique conditionnelle comme celle-ci en dehors de votre corps de composant immédiat.

export default function({ handle, state }) {
  function renderSwitch(item) {
    switch (item.name) {
      case "name1":
        return <InputBox />
      case "name2":
        return <SelectBox />
      case "name3":
        return <SelectBox />
      default:
        return <InputBox />
    }
  }

  return (
    <div style={styles.container}>
      <h3 style={{ margin: 0, marginBottom: 15 }}>InputData</h3>
      {items && items.map(item => <div style={styles.lineContainer}>{renderSwitch(item)}</div>)}
    </div>
  )
}
2
Tom Finney 19 mars 2019 à 09:46