Как устранить ошибку Reactjs ForwardRef для функциональных компонентов - PullRequest
Новая
       22

Как устранить ошибку Reactjs ForwardRef для функциональных компонентов

0 голосов
/ 06 января 2020

Я создал свой собственный функциональный компонент и получаю ошибку ссылки вперед. Я отправил массив объектов вместо символов. Чего не хватает? Как решить эту проблему для функционального компонента? 

     const F1ButtonGroup = ({
        buttonClick,
     symbols,
     className,
  ...props
   } ) => {
   const classes = UseStyles();
   const classNames = className ? clsx(classes.f1groupButton, className) : classes.f1groupButton;
    return (
     <ButtonGroup className={classes.f1buttondiv}>
         <Grid container spacing={1} >
             {symbols && symbols.map((item, key) =>
                 (<Grid item xs={3} sm={3} md={3} lg={3} style={{ marginTop: '1%', padding: '0px' }} 
          key={key} ref={key}>
                     <Link to="/recipekit">
                         <Button onClick={buttonClick} className={classNames}>
                             <FontAwesomeIcon icon={item.name} {...props} />
                         </Button>
                     </Link>
                 </Grid>)
             )}
         </Grid>
       </ButtonGroup>
     );
 };

   export default F1ButtonGroup;

Я импортировал его и использовал его следующим образом: 

     <F1ButtonGroup symbols={symbols} />

     Getting error as : 
     index.js:1 The above error occurred in the <Context.Consumer> component:
    in ForwardRef (created by yn)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by yn)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by yn)
    in div (created by t)
    in t (created by yn)
    in yn (at App.js:57)
    in div (at App.js:49)
    in App (at src/index.js:7)

Я создал свой собственный функциональный компонент и получаю ошибку прямой ссылки. Я отправил массив объектов вместо символов. Чего не хватает? Как решить эту проблему для функционального компонента?

...