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

我有一个React组件，在组件的渲染方法中，我有这样的东西:

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

           { switch(...) {} }

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

Now the point is that I have two div elements, one at the top and one at the bottom, that are fixed. In the middle I want to have a switch statement, and according to a value in my state I want to render a different component. So basically, I want the two div elements to be fixed always, and just in the middle to render a different component each time. I'm using this to implement a multi-step payment procedure). Though, as is the code currently it doesn't work, as it gives me an error saying that switch is unexpected. Any ideas how to achieve what I want?

当前回答

我正在使用这个帮助器，它允许我在JSX中有开关语句

// in helpers folder const switchTrue = (object) => { const { default: defaultValue, ...rest } = object; const obj = { default: defaultValue, ...rest }; const result = Object.keys(obj).reduce((acc, cur) => { return { ...acc, [cur === 'default' ? 'true' : cur]: obj[cur], }; }, {}); return result['true']; }; const Sample = () => { const isDataLoading = false; return ( <div> { switchTrue({ [`${isDataLoading}`]: <div>Loading</div>, [`${!isDataLoading}`]: <div>Data Ready</div>, default: <div>Default</div>, }) } </div> ) } 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>

2021-12-23 09:49:52

其他回答

与其他答案相比，我更倾向于在渲染函数中内联“开关”。它使什么组件可以在那个位置呈现更清楚。你可以使用一个简单的javascript对象来实现一个类似switch的表达式:

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

2018-07-19 21:51:11

让它变得简单，只需使用许多if语句。

例如:

<Grid>
   {yourVar==="val1"&&(<> your code for val1 </>)}
   {yourVar==="val2"&&(<> your code for val2 </>)}
   .... other statments
</Grid>

2021-04-28 14:28:50

React组件中的Switch-Case语句可以如下使用:

<div  id="time-list">
{   
    (() => {
        switch (groupByFilterId) {
            case 0:/*Case 0 */
                return (
                    <div>Case 0</div>
                )
               break;
           case 1: /*Case 1 */
           return ( 
            <div>Case 1</div>
            )
            break;
           case 2:/*Case 2 */
           return ( 
            <div>Case 2</div>
            )
            break;
        }
     })()}

      
       
    
    </div>

2021-05-09 12:05:43

我知道我有点晚了，但我认为这个实现可能会有所帮助

您可以使用条件操作符来呈现组件

如果你有下面的switch语句

switch(value) {
    case CASE1:
        return <Case1Component/>

    case CASE2:
        return <Case2Component/>

    case CASE3:
        return <Case3Component/>

    default:
        return <DefaultComponent/>
}

你可以像这样把它转换成react组件

const cases = [CASE0, CASE1, CASE2]
// Reminds me of 'react-router-dom'
return (
    <div>
        {value === cases[0] && <Case0Component/>}
        {value === cases[1] && <Case1Component/>}
        {value === cases[2] && <Case2Component/>}
        {!cases.includes(value) && <DefaultComponent/>}
    </div>
)

2021-06-21 13:46:00

这个答案专门用来解决@tonyfat提出的“重复”问题，关于如何使用条件表达式来处理相同的任务。

Avoiding statements here seems like more trouble than it's worth, but this script does the job as the snippet demonstrates:

// Runs tests let id = 0, flag = 0; renderByFlag(id, flag); // jobId out of range id = 1; // jobId in range while(++flag < 5){ // active flag ranges from 1 to 4 renderByFlag(id, flag); } // Defines a function that chooses what to render based on two provided values function renderByFlag(jobId, activeFlag){ jobId === 1 ? ( activeFlag === 1 ? render("A (flag = 1)") : activeFlag === 2 ? render("B (flag = 2)") : activeFlag === 3 ? render("C (flag = 3)") : pass(`flag ${activeFlag} out of range`) ) : pass(`jobId ${jobId} out of range`) } // Defines logging functions for demo purposes function render(val){ console.log(`Rendering ${val}`); } function pass(reason){ console.log(`Doing nothing (${reason})`) }

2021-05-07 10:12:17

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

推荐文章

最新文章

标签