使用forwardRef的React - Forwarding道具

Question

我想定义一个LinkButton组件，它的行为将像一个链接，看起来像一个按钮。

我的基本实现抱怨我需要使用React.forwardRef，但是我不确定如何正确地做到这一点，特别是在使用prop转发时。

即使我只是输入道具作为any，我仍然收到来自系统的投诉，说道具无效。

我想知道在这种(或任何)情况下如何正确使用forwardRef。

我的尝试如下所示：

import React from 'react'
import styles from './styles'
import { Button, withStyles } from '@material-ui/core'
import { Link } from 'react-router-dom'

interface IProps {
  classes: any
  to: string
  children: string
}

const NextLink = ({ to, ...rest }: any) => <Link to={to} {...rest} />

const LinkButton = React.forwardRef((props: any, ref: any) => {
  const { classes, children, ...rest } = props // <-- ISSUE BECAUSE OF rest PROP
  return (
    <Button
      ref={ref}
      role='nextButton'
      className={classes.root}
      classes={{ disabled: classes.disabled }}
      component={NextLink}
      {...rest}
    >
      {children}
    </Button>
  )
})
LinkButton.displayName = 'LinkButton'

export default withStyles(styles)(LinkButton)

------------

It would be called like this:

 <LinkButton to='/' color='secondary'>
    {`Go Home`}
 </LinkButton>

Answer 1

通过将NextLink也包装在forwardRef中，我能够解决这个问题。

const NextLink = React.forwardRef(({ to, ...rest }: any, ref: any) => (
  <Link ref={ref} to={to} {...rest} />
))
NextLink.displayName = 'NextLink'