如何将此功能反应组件更改为使用重构的组件？

Question

我有以下功能组件，我有兴趣知道如何将其更改为branch增强组件，而不是if声明。

import React from 'react' 
import PropTypes from 'prop-types' 
import { Button, Icon, Label } from 'semantic-ui-react' 
import { Link } from 'react-router-dom' 
import { setPropTypes, branch } from 'recompose' 

const LoginOrMiniProfile = ({presence}) => { 
    if (presence.account) { 
     return (
      <Link to='/profile'> 
       <Label> 
        <Icon name='user circle outline' /> 
        {presence.account.firstName} 
       </Label> 
      </Link> 
     ) 
    } else { 
     return (
      <div> 
       <Button primary className={`login ${presence.loading && 'loading'}`}>Signup</Button> 
       <Button className={`login ${presence.loading && 'loading'}`}>Login</Button> 
      </div> 
     ) 
    } 
} 

export default setPropTypes({ 
    prensence: PropTypes.object.isRequired 
})(LoginOrMiniProfile) 

而加分，怎么会使用重新构图访问，并在终极版存储更改presence？

Answer 1

下面是一个快速实现你想要的例子。你可以（也应该）做一些重构，比如在其他地方定义内联函数组件。

compose(
    connect(
    ({ presence }) => ({ presence }), // get presence from the redux store via `connect` 
    { 
     updatePresence: updatePresenceActionCreator // inject dispatch(updatePresence) to props 
    } 
), 
    setPropTypes({ 
    prensence: PropTypes.object.isRequired, 
    updatePresence: PropTypes.func.isRequired 
    }), 
    branch(
    ({ presence }) => presence.account, 
    renderComponent(({ presence }) => 
     <Link to="/profile"> 
     <Label> 
      <Icon name="user circle outline" /> 
      {presence.account.firstName} 
     </Label> 
     </Link> 
    ) 
) 
)(({ 
    presence, 
    updatePresence // you can update your presence by invoking this function 
}) => 
    <div> 
    <Button primary className={`login ${presence.loading && "loading"}`}> 
     Signup 
    </Button> 
    <Button className={`login ${presence.loading && "loading"}`}>Login</Button> 
    </div> 
);