React Native 復雜條件渲染設計模式

Question

我的應用程序中有一條路線可能會根據傳入的 state 有很大差異。 例如，假設我們有 3 個狀態：state1、state2 和 state3。 在每種狀態下都會呈現一些功能組件（例如 header 和頁腳，但它們的內容可能會有所不同）。 我還有其他組件只能在 state1 中呈現，其他組件只能在 state2 中呈現，等等。

我的問題是，在這條路線中設置條件渲染以保持代碼可擴展和可維護的最佳方法是什么？

當前實現：目前，我將 state 傳遞給每個下游組件，並根據給定的 state 處理每個組件內部的條件渲染，通常使用 switch 語句。 我已經開始遇到這樣一個問題，即添加另一個 state 或修改我想要為某個 state 呈現的內容變得既耗時又混亂。

選項一：我一直在考慮的第一個模式是為每個 state 創建不同的視圖。 這些 state 特定視圖將僅包括我希望為該特定 state 呈現的組件。 然后我可以將所有視圖包裝在一個更高階的組件中，該組件將根據傳遞的 state 呈現正確的視圖。 我覺得這個選項將是可擴展/可維護的，但是我認為它也會導致大量重復代碼。 前任：

switch (currentState) {
  case "state1":
    return <State1Component />
  case "state2":
    return <State2Component />
  ...
}

State1Component 看起來像這樣：

class State1Component extends Component {
  state = {
    headerText: "lorem ipsum",
    componentText: "..."
    ...
  }

  render() {
    return (
      <View>
        <Header headerText={headerText} />
        ...
      </View>
    )
  }
}

第二個選項：我想到的另一個選項是創建一個單一的高級 object，其中包含每個不同 state 的每個下游組件所需的所有信息。 這個 object 將包含在主路由中。 例如，

stateObject = {
  state1: {
    header: {
      renderComponent: true,
      text: "Welcome to state1"
    },
    component1: {
      renderComponent: false,
    },
    ...
  },
  state2: {
  ...
  }
  ...
}

現在，我可以根據傳入的 state 輕松提取我需要的所有信息，並且可以通過 props 向下傳遞信息。 我覺得這個選項對於最小化重復代碼很有用，但是我認為路由組件會因此變得忙碌/復雜。

Answer 1

我做了一個應用程序，情況類似，很多州，太麻煩了。 所以你在第二種方法中建議的更好。 擁有全局組件並根據您想要的 state 進行渲染總是好的。 假設您有 2 個狀態並且想要顯示 2 個不同的組件。

1. 創建要分別在 state1 和 state2 上渲染的兩個文件 X.js 和 Y.js。

2.制作一個Home.js class，在其中跟蹤state，並在其中導入上述兩個組件並根據條件進行渲染：

import X from 'X.js'
import Y from 'Y.js'

class Home extends Component {

constructor(props){
super(props)
this.state={
state1:false,
state2:true
}
}


render(){

return(
<View>
{this.state.state1?<X />:<View />}
{this.state.state2?<Y />:<View />}
</View>

)
}

}

這不僅增加了代碼的可讀性，而且您實際上遵循了分解每個組件的分形文件夾結構。

隨時提出任何疑問。