澄清对反应组分、高阶组分的概念理解
我有一个关于反应的概念性问题。我的水平相当高，但是今天我遇到了一个情况，我不确定我的直觉是否正确。
tldr的问题是:有一个接受道具参数并返回一个React组件的函数是否很奇怪？我这样做的动机是，我想要一个特定的反应组件的不同配置。 造成这个问题的主要原因之一是流类型。如果您查看下面的示例，如果我只使用InputProps & Props定义一个组件，那么当我只使用"InputProps“配置组件时，流会抱怨并说我没有提供道具。但问题是，在这个“配置”组件被传递到另一个组件之前，我不打算传递道具。 这是否可以被认为是一个功能性的无状态组件，因为它接受道具并返回一个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}>
);
}
}
}回答 1
Stack Overflow用户
发布于 2018-09-08 19:18:20
因此，如果我正确理解，您需要在一个地方预先配置一些带有道具集的组件，然后在不同的地方为它提供额外的道具，对吗？然后，您可以使用返回HOC的函数。
function preconfigure(Component, propsToPreconfigure) {
return additionalProps => (<Component {...propsToPreconfigure} {...additionalProps} />);
}
//...
const PreconfiguredWithAB = preconfigure(MyLovelyComponent, {a: 'preset1', b: 'preset2'});
//...
<PreconfiguredWithAB d="2" e="4" />它并不比您的变体好多少，但是它是通用的，它还允许将中间类存储为一个变量以供重用。
https://stackoverflow.com/questions/52237332
复制相似问题
腾讯云开发者
