模拟获取数据接口
export function getTodoListData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const listData = [
{
name: "默认事项",
isChecked: false,
isDelete: false,
},
];
resolve(listData);
}, 1000);
});
}
创建 Context
创建 Context
用来存储 todo_list
所有列表项
import React from "react";
export const TodoListContext = React.createContext([])
Http 组件
在这个组件中,我们使用 TodoListContext.Provider
来将通过 getTodoListData
获取的模拟接口数据,转发给消费者组件,当没有获取参数的时候,我们使用通过 props
传入的 Loading
组件来渲染当前区域。
import React from "react";
import { getTodoListData } from "./getData";
import { TodoListContext } from "./context";
export const Http = {
Get: class extends React.Component {
state = {
data: [],
component: this.props.loading || "Loading",
};
async componentDidMount() {
const { url } = this.props;
const res = await getTodoListData(url);
this.setState({
data: res,
component: this.props.children,
});
}
render() {
return (
<TodoListContext.Provider value={this.state.data}>
{this.state.component}
</TodoListContext.Provider>
);
}
},
};
好了,我们的工具库函数和组件就都创建完成了,接下来我们就要开始最重要,也是较难理解的部分了————编写基本组件!