从零开始学ReactJS（二）

继续做TodoList项目

接上回

  我们已经实现了添加功能了，但是按下按钮还是没有反应啊，当然，因为我们还没让它显示出来，所以接下来我们要做的就是如何让它显示出来。

建立列表组件

  在src目录下建立一个components子文件夹，在components下建立一个TodoItems.js文件。这个文件将会接收我们的items，作为props。
代码如下：

import React, { Component } from "react";

class TodoItems extends Component {
    createTasks(item) {
        return <li key={item.key}>{item.text}</li>
    }

    render() {
        var items = this.props.items;
        var listItems = items.map(this.createTasks);

        return (
            <ul className="theList">
                {listItems}
            </ul>
        );
    }
};

export default TodoItems;

  我们可以看到，items会作为props传递到子组件中，这就是实现“父传子”的一种方式，当然，如果传进去的是一个函数，也可以实现“子传父”。这里我们暂时先不讲了。
  map方法大家可以参考一下其他文章，很好理解的。

应用列表组件

  既然组件已经创建完了，我们要怎么使用它呢？首先我们在App.js文件头部引入这个组件，并在render里加上这个组件。

import TodoItems from "./components/TodoItems";
...
...
...
	render(){
	...
	...
	...
		</div>
		<TodoItems items={this.state.items}/>
	</div>
	}

  TodoItems这个标签中带的参数就是会以props的方式传入到TodoItems中，现在我们可以打开浏览器看一看效果了。我们可以看到，它成功的显示出来了！但是看起来好丑啊，没有一点美感，所以下一章，我们给它美化一下。