Question

我有一个称为color的函数，该函数以字符串形式返回十六进制颜色。我想将我的类Icon的属性颜色设置为等于函数颜色的结果。结果是该函数返回未定义的值，我似乎无法弄清楚为什么。

我已经验证了if语句是否可以正常工作，所以我可能错误地返回了该语句或不正确地引用了该函数。但是为什么当我将颜色设置为等于函数结果时，它不会更新，为什么函数返回未定义？

color() {
    if (this.state.value) {
        if (this.state.valid) {
            console.log("*")
            return "#44c0b9"
        } else {
            console.log("#")
            return "#D3D3D3"
        }
    }
}

当我运行{this.color()}时，得到*或＃都很好，但是当我运行console.log(this.color())时，当我以为应该获取返回值时，我得到的是Undefined。然后，当尝试在我的班级图标中实现{this.color()}时，颜色未更改，因此功能颜色中都没有显示颜色，只是黑色。

render() {
    return (
        <View style={{ alignItems: 'flex-end', padding:10 }}>
            <Icon
                raised
                reverse
                color={this.color()}
                name='arrow-right'
                type='font-awesome'
                onPress={() => this.color()}
            />
        </View>
    );
}

Answer 1

也许您可以声明局部变量iconColor并将iconColor值分配给Icon的颜色属性。

render(){
   let iconColor  = this.color() || "#000000";
   return(
      <View style={{ alignItems: 'flex-end', padding:10 }}>
          <Icon
            color={iconColor}
          />
      </View>
    )
 }

Answer 2

关于函数返回undefined的唯一方法是，如果您未点击任何return语句。

因此，我非常确定第一个if (this.state.value)不会通过。您的问题与此有关，而不是其他任何问题。试试看这是怎么回事：

color() {
  console.log("calling color, state value is:")
  console.log(this.state.value)
  if (this.state.value) {
    if (this.state.valid) {
      console.log("*")
      return "#44c0b9"
    } else {
      console.log("#")
      return "#D3D3D3"
    }
  } else {
    console.log("%")
    return "#ff0000"
  }
}

有关有效的示例，请参见this snack。

如何将动态道具传递给react-native上课？

2 个答案: