[Recompose] Flatten a Prop using Recompose
Using prop Flatten
2023-09-14 09:00:51 时间
Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.
For example,we have a 'redux-react' like app:
import React from 'react'; import { withProps } from 'recompose'; // Mock Configuration function ReactRedux() { const state = { name: 'Joe', status: 'active' }; return { connect: (map) => withProps(map(state)) }; } const {connect} = ReactRedux(); const UserStyle = { position: 'relative', background: 'lightblue', display: 'inline-block', padding: '10px', cursor: 'pointer', marginTop: '50px' }; const mapStateToProps = (state) => ({ name: state.name, status: state.status }); let User4 = ({ status, name }) => ( <div style={UserStyle}> {name} - {status} </div> ); User4 = connect(mapStateToProps)(User4); export default User4;
Here we using 'connect' & 'mapStateToProps'. 'connect' is also a HoC.
import React from 'react'; import { withProps, compose, flattenProp } from 'recompose'; // Mock Configuration function ReactRedux() { const state = { user: { name: 'Joo', status: 'inactive' }, address: { street: 'SF', postcode: '10101' } }; return { connect: (map) => withProps(map(state)) }; } const {connect} = ReactRedux(); const UserStyle = { position: 'relative', background: 'lightblue', display: 'inline-block', padding: '10px', cursor: 'pointer', marginTop: '50px' }; const mapStateToProps = (state) => ({ user: state.user, address: state.address }); const enhance = compose( connect(mapStateToProps), flattenProp('user') ); let User4 = enhance(({ name, status, address }) => ( <div style={UserStyle}> {name} - {status} - {address.street} - {address.postcode} </div> )); export default User4;
'flattenPorp' helps to get single prop from object and spread its props.
相关文章
- ORA-29506: invalid query derived from USING clause ORACLE 报错 故障修复 远程处理
- ORA-29656: Invalid option for USING ORACLE 报错 故障修复 远程处理
- ORA-64138: Cannot drop groups from an XMLIndex whose internal table has been indexed using Oracle Text. ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-011241; Symbol: ER_XPLUGIN_USING_SSL_CONF_FROM_MYSQLX; SQLSTATE: HY000 报错 故障修复 远程处理
- postgresql 11 的逻辑复制 logical replication 之二 alter table replica identity using详解数据库
- elseLinux:Using IF and ELSE Commands(linuxifand)
- Virtualization on USB Drives Using Linux(虚拟机linuxu盘)
- Exploring the Benefits of Using Linux VM for Your Business Operations(linuxvm)
- Learn How to Set IP using Linux and C: The Ultimate Guide(linuxc设置ip)