[Preact] Use State and Props in the Component Render Function
2024-10-01 20:18:14
Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.
import {h, Component} from 'preact';
import User from './User'; export default class App extends Component {
constructor(props) {
super(props); this.state = {
loading: true,
user: null
};
} componentDidMount() {
fetch(this.props.config.urls.user)
.then(resp => resp.json())
.then(user => {
this.setState({
user,
loading: false
});
})
.catch(err => console.error(err));
} // render(props, state) {
render({config}, {loading, user}) {
return (
<div class="app">
{loading
? <p>Fetching {config.urls.user}</p>
: <User image={user.avatar_url}
name={user.name} />
}
</div>
);
}
}
最新文章
- Nginx如何处理一个请求
- Centos7下Etcd集群搭建
- MVC5 + EF6 完整入门教程三:EF来了
- Oracle查找全表扫描的SQL语句
- MyBatis知多少(12)私有数据库
- MVC entity
- 【转载】Powershell设置世纪互联Office365嵌套组发送权限
- 【python】求水仙数
- JAVA之GUI编程窗体事件
- WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇]
- ios使用xcode进行Archive打包上传出现的常见错误
- Shell脚本了解
- saiku中文查询(鉴于有人提问:saiku执行mdx,有中文报错)
- 如何设置PPT中的演讲者模式
- 如何判断DataSet里有多少个DataTable
- 【mac】ansible安装及基础使用
- C++ 常用设计模式(学习笔记)
- [HDU6196]happy happy happy
- Linux 150命令之 文件和目录操作命令 cd pwd cp mv touch
- 自定义 Collection View 布局
热门文章
- eclipse工作空间配置导出
- Flex 转载
- date---显示或设置系统时间与日期
- 使用pandas导出PostgreSQL 模式下的所有表数据并保存
- php中ajax使用实例
- 洛谷 P1207 [USACO1.2]双重回文数 Dual Palindromes
- C 字符/字符串经常使用函数
- [RxJS] Learn How To Use RxJS 5.5 Beta 2
- 【Java】Java Socket 通信演示样例
- 1.2 Use Cases中 Event Sourcing官网剖析(博主推荐)