如何根据 prop 有条件地渲染组件的颜色？

Question

我的组件的颜色会根据道具“级别”的值而变化。 当我尝试使用状态来设置背景颜色时，我意识到所有组件的颜色都与 state 的颜色相同，因为每条评论都会不断变化。 我尝试使用引用和状态来解决这个问题，但是我无法解决问题，因为代码似乎工作相同。 任何帮助都会很棒，谢谢。

function CommentMargin({level}) {


const [marginColorState, setMarginColorState] = useState(colors.lightPurple);
const marginColor = useRef(null);

useEffect(() =>
    {   
        switch (level) {
            case 1:
                
                setMarginColorState(colors.lightPurple);
                marginColor(marginColorState);
        
            case 2:
                
                setMarginColorState(colors.crimson);
                marginColor(marginColorState);

            case 3:
                
                setMarginColorState(colors.orange);
                marginColor(marginColorState);

            case 4:
                
                setMarginColorState(colors.yellow);
                marginColor(marginColorState);

        }



    }


)


return (
    <View style={styles(marginColor).container}>

    </View>
);

}

export default CommentMargin;
const styles = (marginColor) => StyleSheet.create({
    container:{
        backgroundColor: marginColor.current,
        }

Answer 1

您可以使用useEffect的第二个参数来告诉它何时运行（ 默认情况下它在每次更新时运行）。 我假设您想根据您的代码将level作为第二个参数传递，以便useEffect仅在level更新时运行。

将useEffect与第二个 arg 一起使用的格式如下：

         useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])

Answer 2

我将删除 state、useEffect 和 ref，因为它们使组件过于复杂。 而是根据 level 的值设置背景颜色。 最好的方法类似于您在 useEffect 中所做的，但将其放入常规的 function 中。 就像是：

 const getBackgroundColor = () =>{ switch (level) { case 1: return colors.lightPurple case 2: return colors.crimson case 3: return colors.orange case 4: return colors.yellow } } const styles = (marginColor) => StyleSheet.create({ container:{ backgroundColor: getBackgroundColor(), }