单一事实来源

单一事实来源（Single Source of Truth）

student.jsx：

import React, { Component } from 'react';


class Student extends Component{
  
    render() {
      return (
        <table>
          <tbody>
            <tr>
              <td>name: {this.props.student.name}</td>
              <td>age: {this.props.student.age}</td>
              <td>
              <button 
                onClick={() => this.props.onDelete(this.props.student)}
              >
                Delete
              </button>
              <button 
                onClick={() => this.props.onGrow(this.props.student)}
              >
                Grow
              </button>
              </td>
            </tr>
          </tbody>
        </table>
      );
    };
  }
 
export default Student;

students.jsx：

import React, { Component } from 'react';
import Student from './student';


class Students extends Component{
    state = {
      students: [
        {id:1, name:'tom', age:12},
        {id:2, name:'jim', age:13},
        {id:3, name:'tim', age:14},
      ]
    };
  
    handleDelete = (student) => {
      const students = this.state.students.filter(s => 
        s.id !== student.id);
      this.setState({students});
    };

    handleGrow = (student) => {
      let students = [...this.state.students];
      let index = students.indexOf(student);
      students[index].age += 1;
      this.setState({students});
    };
  
    render() {
      return(
        <div>
          {this.state.students.map(student => 
            <Student 
              key={student.id} 
              student={student}
              onDelete={this.handleDelete}
              onGrow={this.handleGrow}
            />
          )}
        </div>
      );
    };
  }
  
export default Students;

上面例子中，所有 student 子组件的数据应该来自于父组件 students 的 state；子组件无需拥有自己的 state。

要修改子组件的数据，应当发起事件到父组件，用 setState 修改相应的 state。