編集モードと表示モードの反応コンポーネントですが、これは正しいパターンですか？

Question

私はレシピを表示する反応成分を持っています。このコンポーネントは、データを表示するだけでなく、渡された '編集'小道具に応じてデータを編集するためにも使用できます。

現時点では、ユーザーがレシピを編集または表示するかどうかによって、特定の要素を表示/非表示にする条件ロジックがあります。ここに私のレンダー機能があります：

render() { 
    let buttons = null; 
    if (this.props.edit === 'true') { 
     buttons = <div className="buttonList"> 
      <button onClick={this.onSave} className='defaultBtn'>Save</button> 
      <button onClick={this.goBack} className='defaultBtn'>Discard Changes</button> 
     </div>; 
    } else { 
     buttons = <div className="buttonList"> 
      <button onClick={this.goBack} className='defaultBtn'>Back</button> 
     </div>; 
    } 
    return (
     <div className="single"> 
      <img src={this.state.recipe.imageURL} /> 
      <div className='recipeDetails'> 
       <h1>{this.state.recipe.name}</h1> 
       {this.props.edit === 'true' > 0 && 
        <TextField type='text' floatingLabelText='Image URL' onChange={this.onImageUrlChange}></TextField> 
       } 
       <IngredientList onIngredientChange={this.onIngredientChange} 
        onDelete={this.onDelete} 
        ingredients={this.state.recipe.ingredients} 
        edit={this.props.edit} 
        addIngredient={this.addIngredient} /> 
       {buttons} 
      </div> 
     </div> 
    ); 
} 

これを達成するための最良の方法はありますか？このようなif文を使用すると、私に間違いを感じます。 ViewRecipeコンポーネントとEditRecipeコンポーネントを用意してコードの大部分を共有する必要があるようですが、関連する要素を非表示にして表示するロジックがあります。これを行うための特定の反応パターンがありますか？私はHigh Order Componentsについて少しは読んだことがありますが、この特定の問題に合っているかどうかはわかりません。

私はこれを過度に複製していますか？ 2つの別々のコンポーネントを用意してください。 物事の編集側のロジックのほとんど。

Answer 1

1. ニーズのレビューを命名あなたの小道具：

   props.edit ='true'それはprops.mode = 'edit' or 'view'

2. 」render方法の条件ロジック（...それ以外の場合）を軽減し、で始まるメソッドにそれを打破することができレンダリング "します。

3. ソリューションは次のようになります。

   renderButtons() { 
       if (this.props.mode === 'edit') 
        return (
        <div className="buttonList"> 
         <button onClick={this.onSave} className='defaultBtn'>Save</button> 
         <button onClick={this.goBack} className='defaultBtn'>Discard Changes</button> 
        </div> 
       ) 
       else { 
        return (
        <div className="buttonList"> 
         <button onClick={this.goBack} className='defaultBtn'>Back</button> 
         </div> 
        ) 
       } 
       } 
   
       renderTextField() { 
       if (this.props.mode != 'edit') return null; 
       return (
        <TextField type='text' floatingLabelText='Image URL' onChange={this.onImageUrlChange}></TextField> 
       ) 
       } 
   
   
   
       render() { 
   
        return (
         <div className="single"> 
          <img src={this.state.recipe.imageURL} /> 
          <div className='recipeDetails'> 
           <h1>{this.state.recipe.name}</h1> 
           {this.renderTextField()} 
           <IngredientList onIngredientChange={this.onIngredientChange} 
            onDelete={this.onDelete} 
            ingredients={this.state.recipe.ingredients} 
            edit={this.props.edit} 
            addIngredient={this.addIngredient} /> 
           {this.renderButtons()} 
          </div> 
         </div> 
       ); 
       }