第四オペレータはReactでレンダリングしますか？

Question

私は3つの値の1つを持つことができる状態のオブジェクトを持っています。私はそれぞれ違うものを描いています。

 {this.state.progress === 'choose' ? 'Choose your settings' : null} 
     {this.state.progress === 'running' ? 'GO!' : null} 
     {this.state.progress === 'done' ? 'Done' : null} 

私のコードはうまくいきますが、これを書くにはもっと短い方法が必要ですか？

Answer 1

にもかかわらずあなたは少し厄介で読みにくい複数の四元演算子を組み合わせることができます。私は別のアプローチを提案します。

this.state.progressに関連する値を返す関数を作成できます。このようにして、進捗リストに別のオプションを追加すると、追加が容易になり、また、進行状況が空/ヌル/未定義になる可能性を処理し、可能性のあるバグを防ぐことができます。

例

getProgressText =() => { 
    const { progress } = this.state; 
    switch(progress) { 
    case 'choose': 
     return 'Choose your settings'; 
    case 'running': 
     return 'GO!'; 
    case 'done': 
     return 'Done'; 
    default: 
     // handle empty/null/undefined/different value then what you expect 
     break; 
    } 
} 

render() { 
    return(this.getProgressText()) 
} 

Answer 2

短い方法：D：

const { progress } = this.state; 
{ progress === 'choose' && 'Choose your settings' } 
{ progress === 'running' && 'GO!' } 
{ progress === 'done' && 'Done' } 

Answer 3

私は別の関数にそれを回す、代わりにという呼びたい：

function getProgressText(progress) { 
    switch (progress) { 
    case 'choose': 
     return 'Choose your settings' 
    case 'running': 
     return 'Go!'; 
    case 'done': 
     return 'Done'; 
    default: 
     return null; 
    } 
} 

... 

<MyComponent>{getProgressText(this.state.progress)}</MyComponent> 

Answer 4

が応答を保持するオブジェクト（またはES6 Map）を使用します各進捗値に：

オブジェクト（辞書）：

const labels = { 
 
    choose: 'Choose your settings', 
 
    running: 'GO!', 
 
    done: 'Done' 
 
}; 
 

 
const progress = 'running'; // this.state.progress 
 

 
const currentLabel = labels[progress] || null; 
 

 
console.log(currentLabel);

ES6地図：

const labels = new Map([['choose', 'Choose your settings'], ['running', 'GO!'], ['done', 'Done']]); 
 

 
const progress = 'running'; // this.state.progress 
 

 
const currentLabel = labels.get(progress) || null; 
 

 
console.log(currentLabel);

Answer 5

const texts = {'choose': 'Choose your settings', ... } 

、その後：

{texts[this.state.progress]} 

Answer 6

あなたの問題を解決する最良の方法は、スイッチ/ケース演算子と追加の方法です。

 
 
renderProgress =() => (
 
    switch(this.state.progress) { 
 
     case 'choose': 
 
     return 'Choose your settings'; 
 
     case 'running': 
 
     return 'GO!'; 
 
     case 'done': 
 
     return 'Done'; 
 
     default: 
 
     return null; 
 
    } 
 
); 
 

 

 
render() { 
 
    return (
 
    <div> 
 
     {this.renderProgress()} 
 
    </div> 
 
); 
 
}