web-dev-qa-db-ja.com

JSX内部でスイッチケースを使用する方法：ReactJS

反応アプリに4つのコンポーネントをインポートしました。コンポーネントの1つを条件付きで（プロップに基づいて）レンダリングするにはどうすればよいですか？これは私がやろうとしていることです

<ReactSVGPanZoom
      //switch(this.props.Selected){
      // case '1': render <ComponentOne/>; break;
      // case '2': render <ComponentTwo/>; break;
      // case '3': render <ComponentThree/>; break;
      // case '4': render <ComponentFour/>; break;
      // default: render <ComponentOne/>
        }
</ReactSVGPanZoom>
reactjsswitch-statementconditional-rendering
7
Vishnu

JSX内にステートメントを置くことができないため、直接は許可されていません。 1つのこと、コード（スイッチロジック）を関数内に配置してその関数を呼び出し、そこから正しいコンポーネントを返すことができます。

ドキュメントをチェックしてください： JSXに式を埋め込む

このような：

<ReactSVGPanZoom
    {this.renderComponent()}
</ReactSVGPanZoom>


renderComponent(){
    switch(this.props.Selected){
        case '1': return <ComponentOne/>;
        case '2': return <ComponentTwo/>;
        case '3': return <ComponentThree/>;
        case '4': return <ComponentFour/>;
        default: return <ComponentOne/>
    }
}

提案：

breakの後にreturnは必要ありません。

5
Mayank Shukla

次のように、スイッチからコンポーネントを取得して（関数またはインラインでrenderに）、それをReactSvgPanZoomの子としてレンダリングできます。

getComponent(){
  switch(this.props.Selected){
    case '1': 
      return <ComponentOne/>;
    case '2': 
      return <ComponentTwo/>; 
    // .. etc
    default: 
      return <ComponentOne/>
  }
}
render() {
    return (<ReactSVGPanZoom>
        {this.getComponent()}
      </ReactSVGPanZoom>);
  }
3
dashton
render() {
  return (
    <div>
      {
        (() => {
          switch(this.props.value) {
            case 1:
              return this.myComponentMethod();
              break;
            case 2: 
              return () => { return <AnotherComponent/> }; 
              break;
            case 3:
              return <div>1</div>; 
            break;
            default: return null; break;
          }
        }).call(this)
      }
    </div>
  )
}
2
Sasha Kos

この目的のための構成があります： 式を実行

次のように使用できます。

<ReactSVGPanZoom
    {do {
        switch (this.props.Selected) {
            case '1': <ComponentOne/>; break;
            case '2': <ComponentTwo/>; break;
            case '3': <ComponentThree/>; break;
            case '4': <ComponentFour/>; break;
            default: <ComponentOne/>;
        }
    }}
</ReactSVGPanZoom>

Do式でreturnを使用しないでください。do式の最後の式が戻り値になります。そのため、切り替え後にセミコロンを付けても、それは物事を台無しにします。

2
Sassan

Constを作成して、必要なときにいつでも使用できます。

import React from "react";

export const myComponents = {
  Component1: <Component1 />,
  Component2: <Component2 />,
  Component3: <Component3 />,
  Component4: <Component4 />,
}

あなたのメインコンポーネントになりました：

import React from "react";
import {myComponents} from "./const";

...
render() {
  return (
    <div>
      {myComponents[this.props.Selected]}
    </div>
  )
}

https://codesandbox.io/s/mzn5x725vx

1
max li