[React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
2023-09-14 08:59:17 时间
In this lesson we'll look at React PowerPlug's <List />
component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.
import React from "react"; import { render } from "react-dom"; import random from "random-name"; import { List } from "react-powerplug"; function MyList() { return ( <List initial={["Jago", "Cinder", "Glacius", "Riptor"]}> {({ list, push, pull }) => ( <div> <div className="block"> {list.map(name => ( <span key={name} className="tag is-link" style={{ marginRight: 10 }} > <button className="delete is-small" style={{ marginRight: 5 }} onClick={() => pull(n => n === name)} /> {name} </span> ))} </div> <button className="button is-success" onClick={() => push(random.first())} > Add Random Name </button> </div> )} </List> ); } render(<MyList />, document.getElementById("root"));
相关文章
- 【USACO 2018 December Bronze】The Bucket List题解
- Java中List与Map初始化的一些写法
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React Intl] Install and Configure the Entry Point of react-intl
- [Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges
- ubuntu 使用sudo vim /etc/apt/sources.list命令修改文件后该如何退出?
- 【RF库Collections测试】Set List Value
- List the Modules in Your System
- cannot send list of active checks to [ZabbixServerIp]: host [Zabbix server] not found
- [React] Using react-styleguidist for Component demo
- [Algorithm] 234. Palindrome Linked List / Reverse linked list
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [Redux] React Todo List Example (Toggling a Todo)
- 使用Java Stream API将List按自定义分组规则转换成Map的一个例子
- 成功解决pml.Simple derived_col_names[int(obj[‘split_feature‘])], IndexError: list index out of range
- python sql in list
- leetcode 19 -- Remove Nth Node From End of List
- DataTable转换List<T>集合的方法
- react源码分析:深度理解React.Context
- List<?> list= new ArrayList<?>接口引用指向实现类的对象.