モジュール化反応コード：同じフォーマット、別の関数

Question

Reactで簡単なToDoリストを作成しました。

新しいToDoアイテムを追加するためのコンポーネント（名前、タイトル、日付、場所、説明など）と、ToDoアイテムを編集するための別のコンポーネントがあります。

ただし、2つのコンポーネントは、編集コンポーネントがコンテンツで埋め尽くされていることを除いて全く同じです。

私はこれを簡略化する方法がありますか？編集と追加コンポーネントの両方に「一般フォーム」コンポーネントをネストしますか？そして、私はより高次のコンポーネントを検討する必要がありますか？

Answer 1

renderedTodoコンポーネントを作成し、プロパティーをたとえばisEditingに渡すことができます。そして、内部関数が

class TodoItem extends React.Component { 
    render() { 
     const renderedTodo = this.props.isEditing ? (<EditingTodo>) : (<AddingTodo>); 
     return (
      <div> 
       <div>[Common structure]</div> 
       { renderedTodo } 
      </div> 
     ); 
    } 
} 

TodoItem

はまた、それらに関連するすべての一般的なロジック、 EditingTodoと AddingTodoロジックのみを管理してレンダリングするために、適切なコンポーネントを選択レンダリングします。彼らは状態なしで純粋な関数でなければならず、 TodoItemから受け取った小道具を使ってすべてを行うべきです。