清除对React组件，高阶组件的概念性理解

Question

我有一个关于React的概念性问题。我的水平相当高，但今天我遇到了一个情况，我不确定我的直觉是否正确。

tldr问题是：有一个函数接受props参数并返回一个React组件是不是很奇怪？我这样做的动机是我需要特定React组件的不同配置。

这个问题的主要动机之一是Flow输入。如果你看下面我的例子，如果我只用InputProps和Props定义一个组件，当我用“InputProps”配置组件时，流程会抱怨并说我没有提供Props。但问题是，在将“已配置”组件传递到另一个组件之前，我不打算传入props。

这可以被认为是一个功能无状态组件，因为它接受道具并返回一个React元素？我假设React组件计数为React元素

我知道这不是一个高阶组件（HOC），因为HOC是一个接收组件并返回一个新组件的函数 - 这不是这里发生的事情。

我想要这样做的背景是我有一个接受道具的组件，我们称之为myLovelyProp。 myLovelyProp是一个React.Component。 myLovelyProp本身采用各种道具。我有10个左右的各种myLovelyProp配置，所以我想要一个可以快速配置这些不同情况的功能。

这是我正在考虑的一般标记。在下面的例子中，InputProps是我的函数所采用的道具。 Props是MyLovelyComponent的道具 - 它们将在使用MyLovelyComponent时注入，但不会在配置时注入。

type InputProps = {
    prop1: string,
    prop2: string,
}

type Props = {
    propA: string,
    propB: string,
}

export default function(props: InputProps): React.ComponentType<Props> {
    return class MyLovelyComponent extends React.Component<Props, State> {
        ...
        render = () => {
            return (
               <StuffThatNeedsProp1 var1={prop1}>
               <StuffThatNeedsProp2 var1={prop2}>
            );
        }
    }
}

Answer 1

所以，如果我理解正确，你需要在一个地方预先配置一些带有道具的组件，然后在不同的地方为它提供额外的道具吗？然后你可以使用返回HOC的函数

function preconfigure(Component, propsToPreconfigure) {
    return additionalProps => (<Component {...propsToPreconfigure} {...additionalProps} />);
}

//...
const PreconfiguredWithAB = preconfigure(MyLovelyComponent, {a: 'preset1', b: 'preset2'});
//...
<PreconfiguredWithAB d="2" e="4" />

它并不比你的变体好多了，但它是通用的，并且它允许将中间类存储为变量以供重用。