如何根据道具有条件地渲染我的组件的颜色？

Question

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

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 的第二个参数来告诉它何时运行 (by default it runs on each update)。我假设你想根据你的代码将 level 作为你的第二个参数传递，这样 useEffect 运行仅在 level 更新时。

使用 useEffect 和第二个参数的格式如下：

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

Answer 2

我会删除 state、useEffect 和 ref，因为它们会使组件过于复杂。

而是根据级别的值设置背景颜色。最好的方法与您在 useEffect 中所做的类似，但将其放入常规函数中。

类似于：

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 = () => StyleSheet.create({
    container:{
        backgroundColor: getBackgroundColor(),
}

如何根据道具有条件地渲染我的组件的颜色？

How do I conditionally render the color of my component based on the prop?

javascript

css

styles

reactjs

react-native