在无状态组件内传递函数不起作用

Posted

技术标签:

【中文标题】在无状态组件内传递函数不起作用【英文标题】:Passing function inside a stateless component is not working 【发布时间】:2020-09-15 01:27:24 【问题描述】:

我尝试在我的无状态组件中使用一个函数。但它不能正常工作。


const selectedColor = function (color) 
    switch (color) 
        case 'green':
            return styles.green;
            break;
        case 'blue':
            return styles.blue;
            break;
        case 'red':
            return styles.red;
            break;
        default:
            Alert.alert("Undefined Color!");
    

const LightBulb = (isLit, lightColor) => 



    return (
        <View
            style=[isLit ? selectedColor(lightColor) : styles.green, alignSelf: 'stretch']>
            <Text>isLit ? 'ON' : 'OFF'</Text>
        </View>
    );






isLit 为真时,应触发selectedColor(lightColor)。一旦它被触发,即使lightColor 是贪婪、红色或蓝色之一,它也会转到Alert。你能解释为什么会这样吗?有人可以给我一个正确的方法吗?

【问题讨论】:

【参考方案1】:

我已经对您的代码进行了一些更改,它现在可以工作了,演示就在这里。

https://snack.expo.io/@waheed25/smiling-carrot

或者这里是正在运行的代码,你只需要在你的函数中传递你的颜色,它就会被显示出来。

import  View, Text  from 'react-native'
import React, useState from 'react'

const App =()=>
  const [isLit, setIsLit] = useState(true)
const selectedColor = (color)=> 
  console.log('color:', color)
    switch (color) 
        case 'green':
            return backgroundColor: 'green';
        case 'blue':
            return backgroundColor: 'blue';
        case 'red':
            return backgroundColor: 'red';
        default:
            Alert.alert("Undefined Color!");
    

    return (
        <View
            style=[isLit ? selectedColor('red') : backgroundColor: 'green', alignSelf: 'stretch', height: 200]>
            <Text>isLit ? 'ON' : 'OFF'</Text>
        </View>
    );



export default App;

【讨论】:

您好,感谢您的回复。它应该是无国籍的。 userState 是否使其成为有状态的? @FerdaNahitFIDANCI 您可以根据需要在“isLit”上传递任何值,我只是传递值用于演示。 哦,我明白了。谢谢。【参考方案2】:

当我移除 of color 时,它起作用了。

【讨论】:

以上是关于在无状态组件内传递函数不起作用的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 1.5- ui-router:在状态内调用组件,父级不起作用

useState 函数在功能组件中不起作用

Vuex 可重用模块模式。使用状态功能不起作用

React 父组件中的 onClick 事件不起作用

将php变量传递给模态twitter bootstrap不起作用

VueJS从Vuex返回值不起作用