Próbuję użyć ForwardRef na przycisk w projekcie za pomocą eslint i Prop -//a>.

To właśnie starałem się do tej pory, a błędy, które otrzymuję za każdym razem:

Pierwsze podejscie

function Button ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
}

Button.propTypes = {
  action: Action.isRequired
}

export default forwardRef(Button)

Daje mi następujące ostrzeżenie w konsoli: Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

Drugie podejście

function ButtonFunction ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
}

const Button = forwardRef(ButtonFunction);

Button.propTypes = {
  action: Action.isRequired
}

export default ButtonFunction;

Dostaję: action is missing in props validation.

Trzecia próba

const Button = forwardRef(({ action = { callback: () => {}, title: 'unknown' } }, ref) => {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
});

Button.propTypes = {
  action: Action.isRequired
}

export default Button;

Tym razem dostaję: Component definition is missing display name.

Jaki jest właściwy sposób na to?

15
Sharcoux 13 styczeń 2020, 14:52

1 odpowiedź

Najlepsza odpowiedź

Prawie skończysz z trzecią próbą. Ale nie musisz używać dwa razy forwardRef, wystarczy pierwsze użycie z deklaracją Button. Zasada nazwy wyświetlającej nie jest błędem (ani na poziomie JavaScript, ani reagowania), ale raczej intencjonalny rekwizyt w celu pokazania "prawdziwej" nazwy składnika, używanego przez reagowanie w komunikatach debugowania. W twoim przypadku funkcja forwardRef zostanie ukryta "prawdziwą" nazwę komponentu dla transplejki.

Możesz nawet wyłączyć tę regułę, jeśli jest to prawdziwy problem, aby napisać displayName dla każdego z tych przypadków.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md.

const Button = forwardRef(({ action = { callback: () => {}, title: 'unknown' } }, ref) => {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
});

Button.propTypes = {
  action: Action.isRequired
}

Button.displayName = 'Button'

export default Button
26
Julien Sergent 17 styczeń 2020, 16:10