Можно ли переместить этот forwardRef в функцию для повторного использования?

Question

Я нахожусь в процессе переноса моего приложения в Material UI V4, и я пытаюсь переместить компоненты своего реактивного маршрутизатора Link в обернутые компоненты forwardRef, когда пропеллер 'to' установлен программно.

Приведенный ниже код работает, но требует дублирования вызова forwardRef и построения объекта props, и я предпочел бы выполнять эту работу в функции, которая вызывается один раз с аргументами, но я не могу понять, как это сделать.

const ViewLink = (props, ref) => {
    console.log(props);
    switch (props.type) {
        case 'entities':
            return <Link to={`/entities/${props.id}`} {...props} innerRef={ref} />;
        case 'templates':
            return <Link to={`/templates/${props.id}`} {...props} innerRef={ref} />;
        default:
            return null;
    }
}

<Button 
    className={classes.buttonFont}
    component={React.forwardRef((props, ref) => ViewLink(
        { 
            id: childData.id, 
            type: type, 
            ...props
        }, 
            ref
    ))}
>
    {childData[column]}
</Button>

Есть ли способ создать одну функцию, которая обрабатывает оператор switch и forwardRef? В идеале, то, что называется ниже:

<Button 
    className={classes.buttonFont}
    component={(props) => ViewLink(id, type, props)}
>
    {childData[column]}
</Button>

Answer 1

Что-то вроде следующего должно работать нормально.ViewLink может быть определено в отдельном файле и импортировано, если вы хотите использовать его повторно.Любые свойства, которые нужно передать ViewLink, можно передать, указав их в элементе Button.Это позволяет component реквизиту указывать на многоразовый тип, а не на встроенную функцию.

const ViewLink = React.forwardRef((props, ref) => {
    console.log(props);
    switch (props.type) {
        case 'entities':
            return <Link to={`/entities/${props.id}`} {...props} innerRef={ref} />;
        case 'templates':
            return <Link to={`/templates/${props.id}`} {...props} innerRef={ref} />;
        default:
            return null;
    }
});

<Button 
    className={classes.buttonFont}
    id={childData.id}
    component={ViewLink}
>
    {childData[column]}
</Button>