Question

嗨，我有一段旧代码，想用 react-redux hooks 进行转换，任何人都可以启发一下吗？

const Link = ({
  active,
  children,
  onClick
}) => {
  if (active) {
    return <span>{children}</span>;
  }

  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         onClick();
       }}
    >
      {children}
    </a>
  );
};

const mapStateToLinkProps = (
  state,
  ownProps
) => {
  return {
    active:
      ownProps.filter ===
      state.visibilityFilter
  };
};
const mapDispatchToLinkProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}
const FilterLink = connect(
  mapStateToLinkProps,
  mapDispatchToLinkProps
)(Link);

const Footer = () => (
  <p>
    Show:
    {' '}
    <FilterLink filter='SHOW_ALL'>
      All
    </FilterLink>
    {', '}
    <FilterLink filter='SHOW_ACTIVE'>
      Active
    </FilterLink>
    {', '}
    <FilterLink filter='SHOW_COMPLETED'>
      Completed
    </FilterLink>
  </p>
);

我知道如何用useselector(state)替换mapstatetoprops(state)，但我不知道如何替换mapstatetoprops(state,props)，这是项目链接：https://embed.plnkr.co/github/eggheadio-projects/getting-started-with-redux/master/29-react-redux-generating-containers-with-connect-from-react-redux-footerlink?show=script,preview

Answer 1

在使用 prop 时添加新的 ownprops 过滤器以替换之前的 mapstatetoprops，如下所示：

const Link = ({
      active,
      children,
      onClick,
    + filter
    }) => {
    +const active = useSelector(state => state.visibilityFilter == filter)

如何在组合组件中用 useselector 替换 maptostateprops

1 个答案: