javascript - 能否将此 forwardRef 移动到函数中以实现可重用性？

Question

我正在将我的应用程序移动到 Material UI V4，并且当以编程方式设置“to”属性时，我正在努力将我的 react 路由器链接组件移动到 forwardRef 包装的组件中。

下面的代码有效，但需要复制对 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>