Wie verwende ich die switch-Anweisung in einer React-Komponente?

Ich habe eine React-Komponente und innerhalb der renderMethode der Komponente habe ich ungefähr Folgendes:

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>

           { switch(...) {} }

            <div>
                // removed for brevity
            </div>
        </div>
    );
}

Jetzt geht es darum, dass ich zwei divElemente habe, eines oben und eines unten, die fest sind. In der Mitte möchte ich eine switch-Anweisung haben und gemäß einem Wert in meinem Status möchte ich eine andere Komponente rendern. Grundsätzlich möchte ich, dass die beiden divElemente immer fixiert werden und nur in der Mitte jedes Mal eine andere Komponente gerendert wird. Ich verwende dies, um ein mehrstufiges Zahlungsverfahren zu implementieren. Obwohl der Code derzeit nicht funktioniert, funktioniert er nicht, da ich einen Fehler bekomme, der besagt, dass dies switchunerwartet ist. Irgendwelche Ideen, wie ich das erreichen kann, was ich will?

Versuchen Sie dies, was auch viel sauberer ist: Nehmen Sie diesen Schalter in einer Funktion aus dem Render heraus und rufen Sie ihn einfach auf, indem Sie die gewünschten Parameter übergeben. Beispielsweise:

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <div>
      <div>
          // removed for brevity
      </div>
      {this.renderSwitch(param)}
      <div>
          // removed for brevity
      </div>
    </div>
  );
}

Im Gegensatz zu anderen Antworten würde ich es vorziehen, den "Schalter" in der Renderfunktion einzubinden. Dadurch wird klarer, welche Komponenten an dieser Position gerendert werden können. Sie können einen switch-ähnlichen Ausdruck implementieren, indem Sie ein einfaches altes Javascript-Objekt verwenden:

render () {
  return (
    <div>
      <div>
        {/* removed for brevity */}
      </div>
      {
        {
          'foo': <Foo />,
          'bar': <Bar />
        }[param]
      }
      <div>
        {/* removed for brevity */}
      </div>
    </div>
  )
}

Das passiert, weil switchAnweisung eine ist statement, aber hier erwartet Javascript einen Ausdruck.

Obwohl es nicht empfohlen wird, die switch-Anweisung in einer renderMethode zu verwenden, können Sie die selbstaufrufende Funktion verwenden, um dies zu erreichen:

render() {
    // Don't forget to return a value in a switch statement
    return (
        <div>
            {(() => {
                switch(...) {}
            })()}
        </div>
    );
}

Ich habe dies innerhalb der render () -Methode getan:

  render() {
    const project = () => {
      switch(this.projectName) {

        case "one":   return <ComponentA />;
        case "two":   return <ComponentB />;
        case "three": return <ComponentC />;
        case "four":  return <ComponentD />;

        default:      return <h1>No project match</h1>
      }
    }

    return (
      <div>{ project() }</div>
    )
  }

Ich habe versucht, die Rückgabe von render () sauber zu halten, also habe ich meine Logik in eine 'const'-Funktion direkt darüber eingefügt. Auf diese Weise kann ich auch meine Schaltergehäuse sauber einrücken.

Eine Möglichkeit, eine Art Schalter in einem Renderblock mithilfe von bedingten Operatoren darzustellen :

{(someVar === 1 &&
    <SomeContent/>)
|| (someVar === 2 &&
    <SomeOtherContent />)
|| (this.props.someProp === "something" &&
    <YetSomeOtherContent />)
|| (this.props.someProp === "foo" && this.props.someOtherProp === "bar" &&
    <OtherContentAgain />)
||
    <SomeDefaultContent />
}

Es sollte sichergestellt werden, dass die Bedingungen strikt einen Booleschen Wert zurückgeben.

lenkans antwort ist eine großartige lösung.

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting]}
</div>

Wenn Sie einen Standardwert benötigen, können Sie dies sogar tun

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting] || <div>Hello world</div>}
</div>

Wenn Ihnen das nicht gut gefällt, können Sie alternativ so etwas tun

<div>
  { 
    rswitch(greeting, {
      beep: <div>Beep</div>,
      boop: <div>Boop</div>,
      default: <div>Hello world</div>
    }) 
  }
</div>

mit

function rswitch (param, cases) {
  if (cases[param]) {
    return cases[param]
  } else {
    return cases.default
  }
}

Ich bin kein großer Fan einer der aktuellen Antworten, weil sie entweder zu ausführlich sind oder Sie den Code durchspringen müssen, um zu verstehen, was los ist. Warum nicht stattdessen eine wirklich einfache Switch-Komponente erstellen, die basierend auf einem Requisitentest bedingt gerendert wird? Beispielsweise:

const Switch = props => {
  const { test, children } = props
  return children.find(child => {
    return child.props.value === test
  })      
}

const Sample = props => {
  const someTest = true
  return (
    <Switch test={someTest}>
      <div value={false}>Will display if someTest is false</div>
      <div value={true}>Will display if someTest is true</div>
    </Switch>
  )
}

ReactDOM.render(
  <Sample/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Sie können den Wechsel so einfach oder so komplex gestalten, wie Sie möchten. Vergessen Sie nicht, die Kinder und ihre Wertschöpfungen genauer zu überprüfen.

Wie wäre es mit:

mySwitchFunction = (param) => {
   switch (param) {
      case 'A':
         return ([
            <div />,
         ]);
      // etc...
   }
}
render() {
    return (
       <div>
          <div>
               // removed for brevity
          </div>

          { this.mySwitchFunction(param) }

          <div>
              // removed for brevity
          </div>
      </div>
   );
}

Sie können so etwas tun.

 <div>
          { object.map((item, index) => this.getComponent(item, index)) }
 </div>

getComponent(item, index) {
    switch (item.type) {
      case '1':
        return <Comp1/>
      case '2':
        return <Comp2/>
      case '3':
        return <Comp3 />
    }
  }

Sie können keinen Schalter im Render haben. Der Pseudo-Switch-Ansatz, ein Objektliteral zu platzieren, das auf ein Element zugreift, ist nicht ideal, da alle Ansichten verarbeitet werden und dies zu Abhängigkeitsfehlern von Requisiten führen kann, die in diesem Zustand nicht vorhanden sind.

Hier ist eine schöne, saubere Methode, bei der nicht jede Ansicht im Voraus gerendert werden muss:

render () {
  const viewState = this.getViewState();

  return (
    <div>
      {viewState === ViewState.NO_RESULTS && this.renderNoResults()}
      {viewState === ViewState.LIST_RESULTS && this.renderResults()}
      {viewState === ViewState.SUCCESS_DONE && this.renderCompleted()}
    </div>
  )

Wenn Ihre Bedingungen, für die der Ansichtsstatus verwendet wird, auf mehr als einer einfachen Eigenschaft basieren - wie mehrere Bedingungen pro Zeile -, sind eine Aufzählung und eine getViewStateFunktion zum Kapselen der Bedingungen eine gute Möglichkeit, diese bedingte Logik zu trennen und Ihr Rendering zu bereinigen.

Hier ist ein voll funktionsfähiges Beispiel mit einer Schaltfläche zum Wechseln zwischen Komponenten

Sie können einen Konstruktor wie folgt festlegen

constructor(props)
{
    super(props);
    this.state={
        currentView: ''
    }
}

Anschließend können Sie Komponenten wie folgt rendern

  render() 
{
    const switchView = () => {

    switch(this.state.currentView) 
    {

      case "settings":   return <h2>settings</h2>;
      case "dashboard":   return <h2>dashboard</h2>;

      default:      return <h2>dashboard</h2>
    }
  }

    return (

       <div>

            <button onClick={(e) => this.setState({currentView: "settings"})}>settings</button>
            <button onClick={(e) => this.setState({currentView: "dashboard"})}>dashboard</button>

            <div className="container">
                { switchView() }
            </div>


        </div>
    );
}

}}

Wie Sie sehen können, benutze ich eine Taste, um zwischen den Zuständen zu wechseln.

Dies ist ein anderer Ansatz.

render() {
   return {this[`renderStep${this.state.step}`]()}

renderStep0() { return 'step 0' }
renderStep1() { return 'step 1' }

Der Vorschlag in https://stackoverflow.com/a/60313570/770134 hat mir sehr gut gefallen , daher habe ich ihn wie folgt an Typescript angepasst

import React, { FunctionComponent } from 'react'
import { Optional } from "typescript-optional";
const { ofNullable } = Optional

interface SwitchProps {
  test: string
  defaultComponent: JSX.Element
}

export const Switch: FunctionComponent<SwitchProps> = (props) => {
  return ofNullable(props.children)
    .map((children) => {
      return ofNullable((children as JSX.Element[]).find((child) => child.props['value'] === props.test))
        .orElse(props.defaultComponent)
    })
    .orElseThrow(() => new Error('Children are required for a switch component'))
}

const Foo = ({ value = "foo" }) => <div>foo</div>;
const Bar = ({ value = "bar" }) => <div>bar</div>;
const value = "foo";
const SwitchExample = <Switch test={value} defaultComponent={<div />}>
  <Foo />
  <Bar />
</Switch>;