Реакция компонента с режимом редактирования и режимом просмотра, это правильный шаблон?

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> 
    ); 
} 

Это лучший способ достичь этого? Использование, если такие утверждения мне не нравятся. Я чувствую, что должен иметь компонент ViewRecipe и компонент EditRecipe, который разделяет большую часть кода, но имеет некоторую логику, чтобы скрыть и показать соответствующие элементы. Есть ли определенный шаблон React для этого? Я немного читал о компонентах высокого порядка, но не уверен, что они соответствуют этой конкретной проблеме.

Могу ли я превзойти это? Должен ли я иметь только два отдельных компонента? Большая часть логики на стороне редактирования.

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> 
       ); 
       }