這個React組件的每個部分是做什麼的，狀態和道具是如何進行的？

Question

我想了解props和state是如何進出。我正在評論我理解的代碼片段，但也有一些我不能這樣做，因爲我沒有得到正在發生的事情。

This is the code

或者在這裏你可能會看到代碼，以及：你如何解釋什麼是onChange功能上做TodoItems組件

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

。

或者你怎麼解釋的代碼段是這樣的：

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

爲什麼this.state.todos設置props那裏，和爲什麼叫addTodo={}那裏this.addTodo？

Answer 1

通過將屬性添加到JSX（例如TodoItems> items和TodoItems> addTodo），由父組件將Props傳遞到組件。道具可以是數據（簡單類型，數組等），但也可以引用父組件中的回調方法。這些回調可用於將數據從組件傳遞到其父組件。在一個組件中，你應該將op prop視爲不可變對象。所以你不應該改變財產的價值。

在您的示例中，待辦事項（數據）列表正在從一個組件的狀態傳遞到基礎（TodoItems）組件的屬性。 TodoInput有一個'addTodo'屬性，可以用來爲'TodoInput'組件提供一個函數（回調函數），當用戶輸入todo時應該調用該函數。當你通過屬性給一個組件提供回調時，你永遠不會提供參數（'this.addTodo'和'this.addTodo（「這樣做」）'），因爲你只需要指向回調的指針而不是函數的返回值。

在您的示例中，組件'TodoList'負責維護待辦事項列表。這就是爲什麼列表保持在這個組件的狀態。狀態中的每一次改變（使用'setState'方法調用）都會導致'TodoList'組件的重新渲染。由於「TodoList」組件負責列表，因此「TodoInput」組件必須向「TodoList」組件提供新項目。這是通過使用從用戶添加新信息時從'TodoInput'組件中調用的'addTodo'回調來完成的。

另請看看Flux模式，因爲在該模式下，組件本身不負責數據存儲，但商店是。對於較大的應用程序，此模式可以幫助您製作更穩定的React應用程序。