如何將此功能反應組件更改爲使用重構的組件？

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> 
);