将状态作为参数传递给 switch

Posted 2023-02-22

【中文标题】将状态作为参数传递给 switch

【英文标题】：Pass state as arguments to switch

【发布时间】：2019-12-20 10:04:41

【问题描述】：

我有多个值要显示在组件中，但一次只能显示 1 个值。所以在这种情况下，valueOne 是真的，我想在 switch 语句中使用它来返回值。我将创建一个div 来显示值。

如何将this.state 中的值作为switch 中的参数传递？

这是正确的方法吗？我不能使用三元运算符，因为我可能有超过 2 个值。我将添加一个回调来关闭可见的 div，并将 this.state 中的该值设为 false，并将该值之后的设为 true 以在 DOM 中列出。但是我该怎么做呢？

import React,  Component  from 'react';

    const one = () => 
        return(
            <div>
                <p> This is One</p>
            </div>
        )
    

    class Component extends React.Component
       state = 
         value: 'one'
    

    renderSelected = () => 
      switch(this.state.value)
        case 'one' : return <div>one</div>
        default : return null
      
    

    render()
      return <div className='main'>this.renderSelected()</div>
    


export default MyComp;

这里我收到let questOne = this.state 的解析错误

【参考方案1】：

将逻辑包装在一个函数中并从render调用它

class Component extends React.Component
    state = 
        value: 'one'
    

    renderSelected = () => 
        switch(this.state.value)
            case 'one' : return <div>1</div>
            default : return null
        
    

    render()
        return <div className='main'>this.renderSelected()</div>
    

【讨论】：

谢谢。我理解这里的逻辑。我在类外添加了一个常量，我想在开关的返回中使用它。但我得到一个解析错误。我编辑了这个问题。你能看一下吗。非常感谢。 @杜波卡斯

你把一个变成了一个组件，所以你应该把第一个字母大写，然后像<One />一样调用它或者将jsx分配给const one