จะใช้คำสั่ง switch ภายในส่วนประกอบ React ได้อย่างไร?

ฉันมีองค์ประกอบการตอบสนองและในrenderวิธีการของส่วนประกอบฉันมีสิ่งนี้:

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

           { switch(...) {} }

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

ตอนนี้ประเด็นคือฉันมีสองdivองค์ประกอบหนึ่งที่ด้านบนและอีกหนึ่งที่ด้านล่างซึ่งได้รับการแก้ไขแล้ว ตรงกลางฉันต้องการมีคำสั่งสวิตช์และตามค่าในสถานะของฉันฉันต้องการแสดงองค์ประกอบอื่น โดยพื้นฐานแล้วฉันต้องการให้ทั้งสอง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 () {
  return (
    <div>
      <div>
        {/* removed for brevity */}
      </div>
      {
        {
          'foo': <Foo />,
          'bar': <Bar />
        }[param]
      }
      <div>
        {/* removed for brevity */}
      </div>
    </div>
  )
}

ที่เกิดขึ้นเพราะswitchคำสั่งคือstatementแต่ที่นี่จาวาสคริปต์คาดว่าจะมีการแสดงออก

แม้ว่าจะไม่แนะนำให้ใช้คำสั่ง switch ในrenderวิธีการคุณสามารถใช้ฟังก์ชั่นเรียกตัวเองเพื่อให้บรรลุสิ่งนี้:

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 () return สะอาดดังนั้นฉันจึงใส่ตรรกะของฉันไว้ในฟังก์ชัน 'const' ด้านบน วิธีนี้ฉันยังสามารถเยื้องเคสสวิตช์ของฉันได้อย่างเรียบร้อย

วิธีแสดงสวิตช์ชนิดหนึ่งในบล็อกการแสดงผลโดยใช้ตัวดำเนินการตามเงื่อนไข:

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

ควรตรวจสอบให้แน่ใจว่าเงื่อนไขส่งคืนบูลีนอย่างเคร่งครัด

คำตอบของ 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
  }
}

ฉันไม่ใช่แฟนตัวยงของคำตอบใด ๆ ในปัจจุบันเพราะคำตอบเหล่านี้เป็นคำที่ละเอียดเกินไปหรือต้องการให้คุณข้ามรหัสเพื่อทำความเข้าใจว่าเกิดอะไรขึ้น

ฉันชอบทำสิ่งนี้ในลักษณะที่เป็นศูนย์กลางของปฏิกิริยามากกว่าโดยการสร้างไฟล์<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 />
    }
  }

คุณไม่มีสวิตช์ในการแสดงผล วิธี psuedo-switch ในการวาง object-literal ที่เข้าถึงองค์ประกอบหนึ่งไม่เหมาะอย่างยิ่งเนื่องจากทำให้มุมมองทั้งหมดประมวลผลและอาจส่งผลให้เกิดข้อผิดพลาดในการพึ่งพาของอุปกรณ์ประกอบฉากที่ไม่มีอยู่ในสถานะนั้น

นี่เป็นวิธีที่ดีในการดำเนินการที่ไม่ต้องการให้แต่ละมุมมองแสดงผลล่วงหน้า:

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

หากเงื่อนไขของคุณที่สถานะมุมมองขึ้นอยู่กับคุณสมบัติธรรมดา ๆ มากกว่าเช่นหลายเงื่อนไขต่อบรรทัด enum และ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>;

ฉันไม่พอใจกับคำตอบใด ๆ แต่ฉันได้รับแนวคิดบางอย่างจาก @Matt Way

นี่คือทางออกของฉัน:

คำจำกัดความ:

const Switch = props => {
    const { test, children = null } = props;
    return children && children.find(child => child && child.props && child.props.casevalue === test) || null;
}

const Case = ({ casevalue = false, children = null }) => <div casevalue={`${casevalue}`}>{children}</div>;

Case.propTypes = {
    casevalue: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired,
}

const Default = ({ children }) => children || <h1>NO_RESULT</h1>;

const SwitchCase = ({ test, cases = [], defaultValue = null }) => {

    const defaultVal = defaultValue
        && React.cloneElement(defaultValue, { key: 'default-key', casevalue: `${test}` })
        || <Default key='default-key' casevalue={`${test}`} />;

    return (
        <Switch test={`${test}`} >
            {
                cases.map((cas, i) => {
                    const { props = {} } = cas || {};
                    const { casevalue = false, ...rest } = props || {};

                    return <Case key={`case-key-${i}`} casevalue={`${casevalue}`}>{ React.cloneElement(cas, rest)}</Case>
                })
                .concat(defaultVal)
            }
        </Switch>
    );
}

การใช้งาน:

<SwitchCase
  cases={[
    <div casevalue={`${false}`}>#1</div>,
    <div casevalue={`${true}`}>#2</div>,
    <div casevalue={`${false}`}>#3</div>,
  ]}
  defaultValue={<h1>...nothing to see here</h1>} // You can leave it blank.
  test={`${true}`}
/>

function Notification({ text, status }) {
  return (
    <div>
      {(() => {
        switch (status) {
          case 'info':
            return <Info text={text} />;
          case 'warning':
            return <Warning text={text} />;
          case 'error':
            return <Error text={text} />;
          default:
            return null;
        }
      })()}
    </div>
  );
}

นี่เป็นอีกแนวทางหนึ่ง

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

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