Question

我有一个Icon，称之为Icon A，需要更改以及点击时。此外，当它被点击时，还需要出现2个其他图标。我们称它们为Icon X和Icon Y.

当我点击Icon X时，我希望Icon X改变样式，而Icon Y则消失。如果我点击Icon Y也是如此。我觉得我接近这个错误的方式而且我不想使用太多的if / else语句。

会喜欢一些指导或建议，所以我不会在这里过于疯狂。谢谢！以下是我一直在尝试使用的一些代码：

constructor(props){
  super(props);
  this.state = {
    iconAClicked: false,
    iconXClicked: false,
    iconYClicked: false,
  }

  setXYVisible(){this.setState({iconAClicked: !this.state.iconAClicked})}

  setXClicked(){this.setState({iconXClicked: !this.state.iconXClicked})}

  setYClicked(){this.setState({iconYClicked: !this.state.iconYClicked})}

  render(){

    const iconAnotClicked = (
      <View> {iconNotA} </View>
    )

    const iconAClicked = (
      <View> {iconA} </View>
    )

    const iconXnotClicked = (
      <View> {iconNotX} </View>
    )
    const iconXClicked = (
      <View> {iconX} </View>
    )
    const iconYnotClicked = (
      <View> {iconNotY} </View>
    )
    const iconYClicked = (
      <View> {iconY} </View>
    )

    return (
      <View>

        {this.state.iconAClicked ?
          <View>
            <TouchableOpacity onPress={() => this.setXClicked()}>
              {this.state.iconXClicked : iconXClicked ? iconXnotClicked}
            </TouchableOpacity>

            <TouchableOpacity onPress={() => this.setYClicked()}>
              {this.state.iconYClicked : iconYClicked ? iconYnotClicked}
            </TouchableOpacity>
          </View>
          : null
        }

        <TouchableOpacity onPress={() => this.clickedXYVisible()}>
        {this.state.iconAClicked : iconAClicked ? iconAnotClicked}
        </TouchableOpacity>

      </View>
    )


  }
}

Answer 1

我认为你的逻辑对于反应来说几乎是好的。

但是，在这种情况下，你的Y图标不会消失。要轻松切换组件，您可以采用以下方式处理： { this.state.isDisplayed && <component>} ，这比您正在使用的{ this.state.isDisplayed ? <component> : null }更优雅。

此外，您有重复的逻辑，实际上，您的iconAClicked和iconAnotClicked只是<View>，内容不同。您应该创建一个函数iconX，或者将<View>直接放在渲染中。

为了符合你的逻辑，这给出了：

constructor(props){
    super(props);
    this.state = {
       iconAClicked: false,
       iconXClicked: false,
       iconYClicked: false
    }

    setXYVisible(){this.setState({iconAClicked: !this.state.iconAClicked})}
    setXClicked(){this.setState({iconXClicked: !this.state.iconXClicked})}
    setYClicked(){this.setState({iconYClicked: !this.state.iconYClicked})}

    render(){

        return (
          <View>
            { this.state.iconAClicked &&
              <View>
                { !this.state.iconYClicked && 
                    <TouchableOpacity onPress={() => this.setXClicked()}>
                        <View> {this.state.iconXClicked : iconX ? iconNotX} </View>
                    </TouchableOpacity>
                }
                { !this.state.iconXClicked &&  
                    <TouchableOpacity onPress={() => this.setYClicked()}>
                        <View> {this.state.iconYClicked : iconY ? iconNotY} </View>
                    </TouchableOpacity>
                }
              </View>
            }

            <TouchableOpacity onPress={() => this.clickedXYVisible()}>
                 <View> {this.state.iconAClicked : iconA ? iconNotA} </View>
            </TouchableOpacity>

          </View>
        )
    }
}

使用函数代替常量：

    displayXIcon(){return (<View>{ this.state.iconXClicked ? iconX : iconNotX }</View>)}
    displayYIcon(){return (<View>{ this.state.iconYClicked ? iconY : iconNotY }</View>)}
    displayAIcon(){return (<View>{ this.state.iconAClicked ? iconA : iconNotA }</View>)}

    render(){

        return (
          <View>

            {this.state.iconAClicked ?
              <View>
                { !this.state.iconYClicked && 
                    <TouchableOpacity onPress={() => this.setXClicked()}>
                        {this.displayXIcon()}
                    </TouchableOpacity>
                }
                { !this.state.iconXClicked &&  
                    <TouchableOpacity onPress={() => this.setYClicked()}>
                        {this.displayYIcon()}
                    </TouchableOpacity>
                }
              </View>
              : null
            }

            <TouchableOpacity onPress={() => this.clickedXYVisible()}>
                {this.displayAIcon}
            </TouchableOpacity>

          </View>
        )


    }

状态改变应该改变一个comp的风格而隐藏另一个，怎么样？

1 个答案: