Question

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

tldr问题是：拥有一个可以接受的函数是否很奇怪   props参数并返回一个React组件？我做事的动力   所以我想要特定React的不同配置   组件。

此问题的主要动机之一是由于流程类型。   如果您看下面的示例，如果我仅使用InputProps＆Props定义了一个组件，则仅使用“ InputProps”配置该组件时，流程将抱怨并说我没有提供Props。但是问题在于，在将这个“配置的”组件传递到另一个组件之前，我不打算传递道具。

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

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

为什么要执行此操作的上下文是，我有一个包含道具的组件，我们将其称为myLovelyProp。 myLovelyProp是React.Component。 myLovelyProp本身具有各种道具。我有myLovelyProp的10种左右各种配置，所以我想要一个可以快速配置这些各种情况的函数。

这是我在想的一般标记。在下面的示例中，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的函数

CREATE TABLE
CREATE VIEW
CREATE PROCEDURE
CREATE FUNCTION
CREATE RULE
CREATE DEFAULT
BACKUP DATABASE
BACKUP LOG
CREATE TYPE
CREATE ASSEMBLY
CREATE XML SCHEMA COLLECTION
CREATE SCHEMA
CREATE SYNONYM
CREATE AGGREGATE
CREATE ROLE
CREATE MESSAGE TYPE
CREATE SERVICE
CREATE CONTRACT
CREATE REMOTE SERVICE BINDING
CREATE ROUTE
CREATE QUEUE
CREATE SYMMETRIC KEY
CREATE ASYMMETRIC KEY
CREATE FULLTEXT CATALOG
CREATE CERTIFICATE
CREATE DATABASE DDL EVENT NOTIFICATION
CONNECT
CONNECT REPLICATION
CHECKPOINT
SUBSCRIBE QUERY NOTIFICATIONS
AUTHENTICATE
SHOWPLAN
ALTER ANY USER
ALTER ANY ROLE
ALTER ANY APPLICATION ROLE
ALTER ANY SCHEMA
ALTER ANY ASSEMBLY
ALTER ANY DATASPACE
ALTER ANY MESSAGE TYPE
ALTER ANY CONTRACT
ALTER ANY SERVICE
ALTER ANY REMOTE SERVICE BINDING
ALTER ANY ROUTE
ALTER ANY FULLTEXT CATALOG
ALTER ANY SYMMETRIC KEY
ALTER ANY ASYMMETRIC KEY
ALTER ANY CERTIFICATE
SELECT
INSERT
UPDATE
DELETE
REFERENCES
EXECUTE
ALTER ANY DATABASE DDL TRIGGER
ALTER ANY DATABASE EVENT NOTIFICATION
ALTER ANY DATABASE AUDIT
VIEW DATABASE STATE
VIEW DEFINITION
TAKE OWNERSHIP
ALTER
CONTROL

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

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

1 个答案: