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)

对于奖励积分，如何使用Recompose在Redux商店中访问和更改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>
);

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

1 个答案: