小编Tho*_*ins的帖子

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

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

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组件，它们共享大多数代码，但是具有一些隐藏和显示相关元素的逻辑。有一定的反应模式可以做到这一点吗？我已经阅读了一些有关高阶组件的信息，但不确定它们是否适合此特定问题。

我使这个复杂化了吗？我应该只有两个单独的组件吗？逻辑大部分在“编辑”方面。