Day29 实作todoList(四)产生事项列表

确定资料的建立後，接下来要在List元件中使用回圈渲染的事件的方式将每个新增的样式呈现在列表之中。

回圈渲染Item的function

之後会在List元件的jsx使用这个回圈渲染的function元件并传入props，让我们可以取得待办事项的阵列资料。


    const itemLoop = function (list) {
        const deleteItem = prop.fuc.deleteItem
        const doneItem = prop.fuc.doneItem

        return list.map((item) => {
            return (<div key={item.key}>
                <div className="flex item-wrap">
                    <p>{item.content}</p>
                    <div className="flex center gap-10">
                        <Button content="删除" type="detele" />
                        <Button content="完成" />
                    </div>

                </div>
                <hr />
            </div>)
        })
    }

上方code写在List.js中，在List元件的jsx上使用

import React from 'react';
import { useLocation } from 'react-router-dom';
import Button from './Button';

function List(prop) {

	//根据路由判断显示项目跟内容
    const location = useLocation()
    const path = location.pathname
	  const title = path === '/undo' ? '待办' : '完成'
    //在完成事项不需要'完成'按钮，判断在/done路由时不显示
      const btnDisplay = {
        display: path === '/done' ? 'none' : 'flex'
    }

    //项目

    const itemLoop = function (list) {
        // const deleteItem = prop.fuc.deleteItem
        // const doneItem = prop.fuc.doneItem

        return list.map((item) => {
            return (<div key={item.key}>
                <div className="flex item-wrap">
                    <p>{item.content}</p>
                    <div className="flex center gap-10">
                        <div>
                            <Button content="删除" type="detele" />
                         </div>
                          <div style={btnDisplay} >
                              <Button content="完成" />
                          </div>
                    </div>

                </div>
                <hr />
            </div>)
        })
    }

    return (
        <div className="content-edit wrap">
            <div className="title">

			//不同标题，还有根据prop的list显示事件数量
                <h3>{title + '项目'}</h3>
                {`(${prop.show.length > 0 ? `你有${prop.show.length}个${title}项目` :
                `目前无${title}项目`})`}
            </div>
            <div className="item">
            //使用回圈渲染函式的变数传入prop
                {itemLoop(prop.show)}
            </div>

        </div>
    );
}

export default List;

记得要在App.js引入List元件并且传入todoList的阵列唷

//App.js
//省略其他import
//引入List元件
import List from './components/List';

//略...

//App元件的Jsx模板

return (
    <div className="App">
      <Header />
      <div className="container">
        <Input />
        <div className="list-wrapper">

        //传入todoList阵列给List元件
          <List show={todoList} />
        </div>
      </div>
    </div>
  )
}

全部画面出来了！也可以藉由Input新增事项！