Javascript 我可以在React中直接从JSX/TSX中调用HOC吗？

我在TypeScript中有一个React HOC，但当我从TSX组件

render

方法中调用它时，它似乎不起作用。下面是一个例子：

导出类HelloWorldComponent扩展了React.Component{
public render（）：JSX.Element{
回复你好，世界！；
}
}
导出常量withRedText=（组件）=>{
返回类WithRedComponent扩展React.Component{
public render（）：JSX.Element{
返回(
);
}
};
}; 
导出常量HelloWorldComponentWithRedText=withRedText（HelloWorldComponent）；

我从父JSX文件中调用它，如下所示：

public render（）：JSX.Element{
返回(
测试#1：
测试#2：
测试#3:{withRedText（）}
)
}

第一次和第二次测试按预期进行——第二次测试的文本为红色。但第三行什么也没有。我希望第二行和第三行是一样的

当我使用调试器逐步执行它时，Test#2的参数是

HelloWorldComponent

类型的组件，但是Test#3看到的是

Component=Object{$$typeof:Symbol（react.element），…}

是否有一种方法可以从JSX/TSX文件中动态包装语法为

{withRedText（）}

的组件

（TypeScript 2.1.4和React 15.4.0）

---

这是因为在test#3中，您向它传递了一个实例：

，而不是type/class

HelloWorldComponent

。JSX被转换成相当于许多对象实例化样板文件。

我认为您不能直接/隐式地从JSX调用HOC。考虑到JSX的实现和HOC的工作方式，我认为这对性能没有好处：每次组件重新呈现时，它都会再次调用HOC函数，重新创建包装的组件类，然后调用它

但是，通过创建将另一个组件作为参数的组件，通常可以获得类似的效果：

const WithRedText = ({component: Component, children, ...props}) => (
    <div style={{color: "red"}}>
      <Component {...props}>{children}</Component>
    </div>
);

---

请参阅。

这里有一个JavaScript版本：好的，这很有意义，谢谢。我最终想知道我是否可以动态地将它们堆叠起来，例如，

{withFeatureOne（withFeatureTwo（））}

，但这可能只会静态地工作。在考虑了你的答案后，我意识到我问错了问题。我不能像我所想的那样调用HOC，但我仍然可以使用

React.CreateComponent（）

获得合适的语法。我可以用一个助手函数来清理它，比如

export const createComponent=（component，…args）=>React.createElement（component，args）

然后从JSX这样调用：

{createComponent（withRedText（HelloWorldComponent））

。我可以根据需要链接这些内容，语法也不难理解。

ReactDOM.render(
    <div className="container">
        <WithRedText component={HelloWorldComponent} />
    </div>,
);