摘要：初學，擼一個熟悉熟悉基本語法，只有最簡單最簡單的功能。引入這個之后，我們可以直接使用一些簡單的組件，比如等，我們可以更加注重業務邏輯的實現。

初學React，擼一個TodoList熟悉熟悉基本語法，只有最簡單最簡單的功能。

如上圖所示，是一個最簡單的TodoList的樣子了，我們應該怎樣把它拆成一個個的組件呢？

在之前看來，可能就是這樣一個HTML結構：

  

  

    

      

      

      

    
  
  

    
    保存
  

React的核心思想是：封裝組件。

我們也可以按照這個思路來進行組件設計

從小到大，從內到外 ~

我是這樣進行設計的。

除去按鈕，input這些之外，

恩，此時Todo內容的展示組件已經是夠的了，我們再來加一個添加Todo內容的組件AddTodoItem吧，命名貌似有點丑- -，圖中位于下方的藍色部分。

最后就是最外層的紅色部分了，它就是整個app的主體部分，包含著其它小組件，命名為TodoBox。

ok，暫時就這幾個小組件 ~

然我們開始愉快的擼代碼吧 ~

先看看入口程序，很簡單。

var React = require("react");
var ReactDOM = require("react-dom");
import TodoBox from "./components/todobox";
import "./../css/index.css";

export default class Index extends React.Component {
  constructor(){
    super();
  };
  render() {
    return (
        
    );
  }
}

ReactDOM.render(,document.getElementById("example"))

讓我們想想啊，對于每一條內容來說，需要什么呢？

一個確認是否完成的checkbox [ ]

一條內容text

一個刪除button

zzzzzz.....其他的暫時先不加了~

那不是太簡單了 ~

  找工作啊找工作啊
  刪除

不不不，我們現在是在寫React,要這樣：

import React from "react";
import {Row, Col, Checkbox, Button} from "antd";

export default class TodoItem extends React.Component {
  constructor(props) {
    super(props)
    this.toggleComplete = this.toggleComplete.bind(this)
    this.deleteTask = this.deleteTask.bind(this)
  }
  toggleComplete() {
    this.props.toggleComplete(this.props.taskId)
  }
  deleteTask() {
    this.props.deleteTask(this.props.taskId)
  }
  render() {
    let task = this.props.task
    let itemChecked
    if (this.props.complete === "true") {
      task = {task}
      itemChecked = true
    } else {
      itemChecked = false
    }
    return (
      

        
          
             {task}
          
          
            刪除
          
        
      
    )
  }
}

import {Row, Col, Checkbox, Button} from "antd"是引入Ant Design。

我們采用 React 封裝了一套 Ant Design 的組件庫，也歡迎社區其他框架的實現版本。

引入這個之后，我們可以直接使用一些簡單的UI組件，比如Row,Col,Checkbox,Button等，我們可以更加注重業務邏輯的實現。

接下來就是拿一個

import React from "react";
import TodoItem from "./todoitem";
export default class TodoList extends React.Component{
  constructor(props) {
    super(props);
  }
  render(){
    var taskList=this.props.data.map(listItem=>
      
    )
    return(
      

        {taskList}
      
    )
  }
}

添加內容這個組件也比較簡單，就只需要一個input和一個button即可：

import React from "react";
import ReactDOM from "react-dom";
import {Row, Col, Form, Input, Button,notification } from "antd";
export default class AddTodoItem extends React.Component {
  constructor(props) {
    super(props)
    this.saveNewItem = this.saveNewItem.bind(this)
  }
  saveNewItem(e) {
    e.preventDefault()
    let element = ReactDOM.findDOMNode(this.refs.newItem)
    let task = element.value
    if (!task) {
      notification.open({
        description: "Todo內容不得為空！",
    });
    } else {
      this.props.saveNewItem(task)
      element.value = ""
    }
  }
  render() {
    return (
      

        
          
          
          保存
        
      
    )
  }
}

我們的小組件已經都實現了，拿一個大box包起來唄 ~

import React from "react";
import TodoList from "./todolist";
import AddTodoItem from "./addtodoitem";
import {Button, Icon, Row, Col} from "antd";
export default class TodoBox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [
        {
          "id": "1",
          "task": "做一個TodoList Demo",
          "complete": "false"
        }, {
          "id": "2",
          "task": "學習ES6",
          "complete": "false"
        }, {
          "id": "3",
          "task": "Hello React",
          "complete": "true"
        }, {
          "id": "4",
          "task": "找工作",
          "complete": "false"
        }
      ]
    }
    this.handleToggleComplete = this.handleToggleComplete.bind(this);
    this.handleTaskDelete = this.handleTaskDelete.bind(this);
    this.handleAddTodoItem = this.handleAddTodoItem.bind(this);
  }
  generateGUID() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0,
        v = c == "x" ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }
  handleToggleComplete(taskId) {
    let data = this.state.data;
    for (let item of data) {
      if (item.id === taskId) {
        item.complete = item.complete === "true" ? "false" : "true"
      }
    }
    this.setState({data})
  }
  handleTaskDelete(taskId) {
    let data = this.state.data
    data = data.filter(task => task.id !== taskId)
    this.setState({data})
  }
  handleAddTodoItem(task) {
    let newItem = {
      id: this.generateGUID(),
      task,
      complete: "false"
    }
    let data = this.state.data
    data = data.concat([newItem])
    this.setState({data})
  }
  render() {
    return (
      

        

          
React TodoList
          
          
        
        
          
          
            
              axuebin
            
            
              axuebin
            
          
        
      
    )
  }
}

注意：

通過props傳遞子組件需要的值和方法

傳遞方法時一定要bind(this)，不然內部this會指向不正確

完整的Demo代碼在這：https://github.com/axuebin/react-todolist

原文地址：http://axuebin.com/blog/2017/...