如何在React组件中使用switch语句？

我有一个React组件，在该组件的render方法内部，我有这样的东西：

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

           { switch(...) {} }

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

现在的要点是，我有两个固定的div元素，一个在顶部，一个在底部。在中间，我想有一个switch语句，根据状态下的值，我想渲染一个不同的组件。因此，基本上，我希望两个div元素始终固定，并且每次都在中间以呈现不同的组件。我正在使用它来实现多步付款程序）。但是，正如当前的代码一样，它不起作用，因为它给了我一个错误，说这switch是意外的。有什么想法可以实现我想要的吗？

尝试一下，这也更清洁：在函数中从渲染中获取该开关，然后调用它以传递所需的参数。例如：

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>
  );
}

与其他答案相反，我希望在render函数中内联“开关”。这样可以更清楚地知道在该位置可以渲染哪些组件。您可以使用普通的旧javascript对象来实现类似switch的表达式：

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

之所以会这样，是因为switchstatement是一个statement，但是javascript需要一个表达式。

尽管不建议在render方法中使用switch语句，但是您可以使用自调用函数来实现此目的：

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

我在render（）方法中做到了这一点：

  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>
    )
  }

我试图使render（）返回的内容保持整洁，因此我将逻辑放在上面的'const'函数中。这样，我也可以整齐地缩进开关盒。

lenkan的答案是一个很好的解决方案。

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

如果您需要默认值，那么您甚至可以

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

或者，如果那对您不满意，那么您可以执行类似的操作

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

与

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

一种使用条件运算符表示渲染块中的一种开关的方法：

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

应该确保条件严格返回布尔值。

我不是当前答案的忠实拥护者，因为它们要么太冗长，要么要求您跳过代码以了解正在发生的事情。

我更喜欢通过创建一个以组件为中心的方式来执行此操作<Switch/>。该组件的工作是获取一个道具，并仅渲染其子道具与该道具匹配的子项。因此，在下面的示例中，我test在开关上创建了一个道具，并将其与子项上的value道具进行了比较，仅渲染了匹配的道具。

例：

const Switch = props => {
  const { test, children } = props
  // filter out only children with a matching prop
  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>

您可以根据需要使开关简单或复杂。不要忘记对孩子及其价值道具进行更强大的检查。

怎么样：

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>
   );
}

你可以做这样的事情。

 <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 />
    }
  }

您无法在渲染中进行切换。放置访问一个元素的对象文字的伪切换方法不是理想的，因为它会导致处理所有视图，并且可能导致该状态下不存在的prop的依赖项错误。

这是一种很好的干净方法，不需要预先渲染每个视图：

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>
  )

如果您的视图状态条件不仅仅基于简单的属性（例如每行多个条件），则枚举和getViewState封装条件的函数是分隔此条件逻辑并清理渲染的好方法。

这是一个完整的工作示例，使用按钮在组件之间进行切换

您可以按照以下方式设置构造函数

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

然后您可以按以下方式渲染组件

  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>
    );
}

}

如您所见，我正在使用按钮在状态之间进行切换。

我真的很喜欢https://stackoverflow.com/a/60313570/770134中的建议，所以我像这样修改了Typescript

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>;

这是另一种方法。

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

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