reactjs - React - 使用 forwardRef 转发道具

Question

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

我的基本实现抱怨我需要使用 React.forwardRef，但是我不确定如何正确执行此操作，尤其是使用道具转发。

即使我只是输入道具，因为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>

score -1 · Accepted Answer

通过包装NextLinkforwardRef 以及我能够解决这个问题。

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

reactjs - React - 使用 forwardRef 转发道具

1 回答 1

Related

Reference