从零开始搭建一个react项目开发(5)

日期：2020-05-11 栏目：程序人生浏览：次

完整的组件如下:

import React from 'react';

const List = (props) => {

 const list = props.listItems.map((el, i)=>(
  <li key={i}><h2>el</h2></li>
 ));

 return (
  <div>
   <ul>
    {
     list
    }
   </ul>
  </div>
 )
};

export default List;

现在打开浏览器就可以看到一列列表了。接下来就是给我们的项目加入功能了，包括添加新的事项，标注事项完成和删除列表中事项。

给APP添加功能

1.函数型组件

首先我们需要添加一个input元素以便可以输入代办事项。因此我们在components文件夹中新建一个Input.js，然后在其中创建并输出一个名叫Input的函数型组件。

把下面的jsx代码粘贴到你的函数型组件return之中:

<form>
 <div
  className="form-group">
  <label
   htmlFor="listInput">
   Email address
  </label>
  <input
   type="text"
   className="form-control"
   id="listItemInput"
   placeholder="Add new todo"
  />
  <button
   className="btn btn-primary">
   Add Item
  </button>
 </div>
</form>

2. Input

现在我们的jsx没有做任何特殊的事情，仅仅是一个基本的html视图，不过我们先测试一下把其导入到ToDoApp.js，形式就是<Input/>。

这时候会发现一个输入框和按钮的视图，这个组件的静态视图已经写好了，下面就需要添加功能了。

3. Props

首先我们需要做的是如何获取输入框的值，因为这个输入框的值需要在其他组件中获取，所以我们并不想要在Input组件中来处理这个数据存储。事实上，在子组件中存储数据在任何时候都是不推荐的，我们应该将数据存储在app的顶端组件并且通过props传递下来。

另一个需要记住的是即使我们目前把数据存储在了上层的 ToDoApp 组件，后期还是会用redux来代替来处理整个app的数据。这里先仅仅使用react的state来实现。

ok，我们在ToDoApp的 componentWillMount的setState中新增一个newToDo属性用来存储输入框的值。

 componentWillMount(){
  this.setState({
   list: ['thing1', 'thing2', 'thing3'],
   newToDo: 'test'
  })
 };

同样的就可以通过在<Input />上通过props传递下去。

4. 解构（Destructuring）

在Input.js中我们通过参数props可以获得上级组件传递下来的值, 但是还可以用ES6的新特性解构来作为参数，这样看起来更加酷！

把Input组件的props参数修改为({
value })这样的参数形式，这样可以把props这个对象参数解构为一个个键值对。直接看个小例子来就很明白了：

从零开始搭建一个react项目开发(5)

相关推荐