このReactコンポーネントのすべての部分をどのように実行しているのですか、状態と小道具の仕組みとは？

Question

propsとstateがどのように出て行くのか理解しようとしています。私は理解しているコードをコメントしていますが、何が起こっているのか分からないためにできないものがいくつかあります。

This is the code

それともここであなたにも、コードが表示される場合があります

 class TodoList extends React.Component { 
     // THIS IS THE PARENT COMPONENT 

     // WE DECLARE THE TYPE OF PROPS 
     static propTypes = { 
      todos: React.PropTypes.array 
     } 
     // INITIAL STATE OF THE COMPONENT 
     constructor(props) { 
      super(props) 
      this.state = { todos: this.props.todos || [] } 
     } 

     addTodo = (item) => { 
      // WE START MODIFYING THE STATE OF THE COMPONENT 
      this.setState({todos: this.state.todos.concat([item])}); 
     } 

     render() { 
      return (
      <div className="panel panel-default TodoList"> 
       <h3>TODO List</h3> 
       <TodoItems items={this.state.todos}/> 
       <TodoInput addTodo={this.addTodo}/> 
      </div> 
     );  
     } 
     }; 

     class TodoItems extends React.Component { 

     static propTypes = { 
      items: React.PropTypes.array.isRequired 
     } 

     constructor(props) { 
      super(props); 
     } 

     render() { 
     let createItem; 

      createItem = (item, index) => { 
      return (
       <li key={index} className="list-group-item">{item}</li> 
      ); 
      }; 
     return (
      <ul className="TodoItems list-group"> 
       {this.props.items.map(createItem)} 
      </ul> 
     ); 
     } 
     }; 

     class TodoInput extends React.Component { 

     constructor (props) { 
      super(props); 
      this.state = {item: ''}; 
     } 

     onChange = (e) => { 
      this.setState({item: e.target.value}); 
     } 

     handleSubmit = (e) => { 
      e.preventDefault(); 
      this.props.addTodo(this.state.item); 
      this.setState({item: ''}); 
     } 

     render() { 
      return (
      <form onSubmit={this.handleSubmit} className="TodoInput"> 
       <div className="input-group"> 

       <input type="text" 
         className="form-control" 
         placeholder="Search for..." 
         onChange={this.onChange} value={this.state.item}/> 

       <span className="input-group-btn"> 
        <input className="btn btn-default" 
         type="submit" value="Add" /> 
       </span> 

       </div> 
      </form> 
     ); 
     } 
     }; 


     React.render(<TodoList todos={['red','blue']}/>, document.getElementById('container')); 

どのようにonChange機能がTodoItemsコンポーネントに何をしているかを説明します。

またはどのようにあなたは、このようなコードの断片を説明します：

<TodoItems items={this.state.todos}/> 
<TodoInput addTodo={this.addTodo}/> 

なぜthis.state.todosがあると、なぜ名前addTodo={}がthis.addTodoとpropsを設定していますか？

Answer 1

JSX（TodoItems> itemsやTodoItems> addTodoなど）に属性を追加すると、親コンポーネントによってコンポーネントにコンポーネントが配信されます。小道具はデータ（シンプルな型、配列など）だけでなく、親コンポーネントのコールバックメソッドへの参照でもあります。これらのコールバックは、コンポーネントからその親にデータを通信するために使用できます。コンポーネント内では、op propsを変更不可能なオブジェクトと考えるべきです。したがって、プロパティの値を変更しないでください。

例では、ToDoの（データ）のリストが、1つのコンポーネントの状態から基礎となる（TodoItems）コンポーネントのプロパティに渡されています。 TodoInputには、todoがユーザーによって入力されたときに呼び出される 'TodoInput'コンポーネントに関数（コールバック）を提供するために使用できる 'addTodo'プロパティがあります。プロパティを介してコンポーネントにコールバックを渡すと、コールバックへのポインタのみを要求するため、パラメータ（ 'this.addTodo'対 'this.addTodo（ "これを行う"）'）を指定することはありません関数の戻り値

例では、コンポーネント 'TodoList'はToDoのリストを管理します。そのため、リストはこのコンポーネントの状態で保持されます。状態（「setState」メソッドを使用して呼び出される）が変更されるたびに、「TodoList」コンポーネントが再描画されます。 'TodoList'コンポーネントはリストを担当するため、 'TodoInput'コンポーネントは 'TodoList'コンポーネントに新しいアイテムを提供する必要があります。これは、ユーザーが新しい情報を追加したときに 'TodoInput'コンポーネントから呼び出される 'addTodo'コールバックを使用して行われます。

Fluxパターンも見てください。そのパターンでは、コンポーネント自体がデータストレージを担当していませんが、ストアがあるからです。より大きなアプリケーションの場合、このパターンはより安定したReactアプリケーションを作成するのに役立ちます。