Javascript 明确对反应组件、高阶组件的概念性理解

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

tldr的问题是：有一个接受 props参数并返回一个React组件？我做事的动机 所以我想要一个特殊的反应的不同配置 组成部分

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

因为它接受props并返回React元素，所以可以将其视为功能性无状态组件吗？我假设React组件计数为React元素

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

我之所以要这样做，是因为我有一个组件，它包含一个道具，我们称之为

myLovelyProp

myLovelyProp

是一个

React.Component

myLovelyProp

本身拥有各种道具。我有10种左右不同的

myLovelyProp

配置，因此我想要一个能够快速配置这些不同情况的函数

这是我所想的一般标记。在下面的示例中，

InputProps

是我的函数所使用的道具<代码>道具是

MyLovelComponent

的道具-它们将在使用

MyLovelComponent

时注入，但在配置时不会注入

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}>
            );
        }
    }
}

类型InputProps={
prop1:字符串，
建议2：字符串，
}
类型道具={
普罗帕：弦，
B:字符串，
}
导出默认函数（props:InputProps）：React.ComponentType{
返回类MyLovelyComponent扩展了React.Component{
...
渲染=（）=>{
返回(
);
}
}
}

因此，如果我理解正确，您需要在一个位置预先配置一些组件和一套道具，然后在不同的位置为其提供额外的道具，对吗？然后可以使用返回HOC的函数

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

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

功能预配置（组件、属性和重新配置）{
return additionalProps=>（）；
}
//...
const PreconfiguredWithAB=预配置（MyLovelComponent，{a:'preset1'，b:'preset2'}）；
//...

---

它并不比您的variant好多少，但它是泛型的，并且允许将中间类存储为变量以供重用。

目前您不返回组件，而是在内部声明类。但即使结果返回了组件，在函数中声明类也会很奇怪。您将永远无法在其他地方重复使用它。@skyboyer-感谢您指出我没有返回组件的事实-只是修复了它。我不需要重复使用函数中的组件，我只需要能够使用返回的组件。另外，让我编辑一下这个问题，解释一下这其中的一个主要动机是因为流类型问题。对不起，我仍然不明白您面临的挑战是什么。如果需要道具，你怎么能避免传球？如果不需要道具，为什么不将其标记为可选？如果您有不同版本的

类型道具

，根据具体情况，您需要不同的道具，而对于其他情况，则应跳过这些道具-然后您可以将类型声明为

type Props=PropsConfig1 | PropsConfig2

。请更具体地说明挑战本身。如示例中所示，组件都需要输入道具和道具。但是，InputProp是在配置时传入的，稍后当另一个组件使用它时会注入Prop。这有用吗？然而，Flow不知道我在两个不同的时间传递道具，所以如果我不同时传递道具，它会抱怨，除非我这样做。