Reactjs組件

Question

我有3個組成部分，我在我的渲染之間的切換反應應用

以前我是用狀態

state = { 
    one: true, 
    two: false, 
    three: false 
} 

渲染，我想它的狀態設置爲true，所有的一個使它們其他假

，並使得它們

<div> 
     { 
     this.state.one && 
     <Start 
      switchDisplay={ this.switchDisplay } 
      quizname={ quizname } 
      author={ author } 
     /> 
     } 
     { this.state.two && 
     <Playground 
      {...this.state.currentQuestion} 
      onclick={this.nextQuestion} 
     /> 
     } 
     { 
     this.state.three && 
     <Score nominator={this.result} denominator={entry.length}/> 
     } 
    </div> 

（不要考慮一下道具）

後來我現在重構律位後，使用第三方軟件包

https://www.npmjs.com/package/react-display-name 

。

我有具有組分作爲它的值

和如果我需要的部件之間的開關I只是改變它的狀態

和道具通過我用該第三隻有一個狀態方包

獲得當前組件的名稱和一些有條件的邏輯在道具

我的問題是這是更好的方法

通

將所有組件的狀態設置爲 ，並將該值設置爲true，將所有其他設置爲false。

或

具有用於該組件的一個狀態直接傳遞在作爲其值。

並使用「第三方包」獲取當前渲染的組件的顯示名稱，並使用組件的名稱傳遞道具。

更多狀態或一個額外的包？

Answer 1

爲了調和狀態變化而做的減少工作總是在這裏取勝。因此，更好的方法是對於直接傳入的組件具有一個狀態，其值爲。

如果每次只顯示3個組件中的一個，則可能不需要外部庫。

在constructor()

const state = { 
    display: 'start', 
}; 

this.state = state; 

電線用於與對象鍵儘可能狀態的所有3個分量的查找對象值

const gameComponentRegistry = { 
    'start': Start, 
    'playground': Playground, 
    'score': Score, 
} 

export default gameComponentRegistry; 

在render()，進口和查找組件呈現在gameComponentRegistry

const component = gameComponentRegistry[this.state.display]; 
const props = {}; // makeup props 
<div> 
    { <component ...props /> } 
</div>