具有编辑模式和查看模式的反应组件，这是正确的模式吗？

Posted 2023-02-21

【中文标题】具有编辑模式和查看模式的反应组件，这是正确的模式吗？

【英文标题】：React component with Edit Mode and View Mode, is this a correct pattern?

【发布时间】：2017-06-24 02:50:27

【问题描述】：

我有一个显示配方的反应组件。该组件可用于查看数据和编辑数据，具体取决于传递给它的“编辑”道具。

目前我有一些条件逻辑，它将根据用户是要编辑还是查看食谱来隐藏/显示某些元素。这是我的渲染函数：

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 组件，它们共享大部分代码，但有一些逻辑来隐藏和显示相关元素。是否有特定的 React 模式可以做到这一点？我读过一些关于高阶组件的文章，但不确定它们是否适合这个特定问题。

我是否过于复杂了？ 我应该只有两个独立的组件吗？ 编辑方面的大部分逻辑。

【参考方案1】：

你的道具命名需要审核：

props.edit ='true'? 可以是props.mode = 'edit' or 'view'

减轻render 方法的条件逻辑（if...else）并将其分解为以“render”为前缀的方法。

解决办法是：

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

【讨论】：

这是解决给定简单组件问题的一种方法。 OP 正在询问这是否是正确的模式，我认为你没有触及。

同意，带着同样的问题来到这里，这个答案没有回答问题。

你是对的@kevin_fitz。我在另一个问题中写了一个答案，我认为它在这里是相关的：***.com/a/52904350/747579。你会喜欢答案的。