javascript - 我可以直接从 React 中的 JSX/TSX 调用 HOC 吗？

Question

我在 TypeScript 中有一个 React HOC，但当我从 TSX 组件中调用它时它似乎不起作用 render方法。这是一个例子:

export class HelloWorldComponent extends React.Component<{}, {}> {
    public render(): JSX.Element {
        return <div>Hello, world!</div>;
    }
}

export const withRedText = (Component) => {
    return class WithRedComponent extends React.Component<{}, {}> {
        public render(): JSX.Element {                
            return (
                <div style={{color: "red"}}>
                    <Component {...this.props} />
                </div>
            );
        }
    };
}; 

export const HelloWorldComponentWithRedText = withRedText(HelloWorldComponent);

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

public render(): JSX.Element {
    return (
       <div>
           Test #1: <HelloWorldComponent/>
           Test #2: <HelloWorldComponentWithRedText />
           Test #3: { withRedText(<HelloWorldComponent />) }
       </div>
    )
}

第一个和第二个测试按预期工作——第二个测试中的文本为红色。但第三行什么也没呈现。我预计第二行和第三行是相同的。

当我使用调试器单步调试它时，测试 #2 的参数是 HelloWorldComponent 类型的组件。 ，但测试 #3 看到的是 Component = Object {$$typeof: Symbol(react.element), ...} .

有没有一种方法可以使用类似 { withRedText(<HelloWorldComponent />) } 的语法动态包装组件从 JSX/TSX 文件中？

(TypeScript 2.1.4 和 React 15.4.0)

Here it is on CodePen

Answer 1

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

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

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

(我将 component 作为小写传递，因为这似乎是 props 的约定，但在 WithRedText 中，我将其大写，因为这就是 JSX 识别自定义的方式组件而不是 HTML 标签。)

然后，使用它:

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

参见http://codepen.io/joshkel/pen/MJGLOQ .