标签: higher-order-components

我写了一个高阶组件:

import React from 'react';


const NewHOC = (PassedComponent) => {
    return class extends React.Component {
        render(){
            return (
                <div>
                    <PassedComponent {...this.props}/>
                </div>
            )
        }
    }
}

export default NewHOC;

我在我的App.js中使用上面的内容:

import React from 'react';
import Movie from './movie/Movie';
import MyHOC from './hoc/MyHOC';
import NewHOC from './hoc/NewHOC';
export default class App extends React.Component {
  render() {
   return (
    <div>
     Hello From React!!
     <NewHOC>
        <Movie name="Blade Runner"></Movie>
     </NewHOC>
    </div>
   );
  }
 }

但是,我得到的警告是:

警告:函数作为React子函数无效.如果返回Component而不是render,则可能会发生这种情况.或许你打算调用这个函数而不是返回它.在App中由div(由App创建)中的NewHOC(由App创建)

Movie.js文件是:

import React from "react";

export default …

我已经创建了一个HOC在我反应过来的应用程序下面的这个，其工作的罚款。但是我想知道是否有办法将 HOC 创建为功能组件（有或没有状态）？？？因为给定的示例是基于类的组件。

试图通过网络找到相同的内容，但什么也找不到。不确定这是否可能？或者永远做正确的事情？

任何线索将不胜感激:)

由于TypeScript改进了v3.2中的JSX类型检查,我们现在有一个问题就是正确键入我们的HOC.

有人可以在TypeScript 3.2的以下HOC中修复类型吗？

import { ComponentType } from 'react';

type Props = { custom: string };
type Omit<T, K extends string> = Pick<T, Exclude<keyof T, K>>;

function hoc<P extends Props>(Component: ComponentType<P>) {
  return (props: Omit<P, keyof Props>) => {
    return <Component {...props} custom="text" />;
  }
}

TypeScript错误:

Type '{ custom: string; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
Property 'custom' does not exist on type 'IntrinsicAttributes & P & { children?: ReactNode; }' …

我有一个显示样式文本的React组件,我想让它加载网络资源,监听WebSocket输入和显示通知.为了做到这一点,我写的高阶组件封装功能对于每一种:withResource,withSocket,和withNotifications.

导出组件时,这是正确的吗？

class TextComponent extends React.Component {
  ...
}

export default withResource(withSocket(withNotifications(TextComponent)))

有人可以解释这两者之间有什么区别吗？我的意思是除了语法差异,这两种技术都用来实现同样的事情(这是重用组件逻辑)吗？

据我所知,如果父母组成部分重新出现,那么除非他们实施,否则其所有子女都将会重新投降shouldComponentUpdate().我做了一个例子,这似乎不是真的.

我有3个部分组成:<DynamicParent/>,<StaticParent/>和<Child/>.该<Parent/>组件负责渲染<Child/>,但以不同的方式做到这一点.

<StaticParent/>渲染函数静态地声明<Child/>运行前,如下所示:

 <StaticParent>
    <Child />
 </StaticParent>

虽然<DynamicParent/>句柄<Child/>在运行时动态接收和呈现,如下所示:

 <DynamicParent>
    { this.props.children }
 </DynamicParent>

两者都有<DynamicParent/>并且<StaticParent/>让onClick听众改变他们的状态并在点击时重新渲染.我注意到,点击<StaticParent/>它时都会<Child/>被重新渲染.但是当我点击时<DynamicParent/>,只有父和NOT <Child/>被重新渲染.

<Child/>是一个没有的功能组件,shouldComponentUpdate()所以我不明白它为什么不重新渲染.有人可以解释为什么会这样吗？我在与此用例相关的文档中找不到任何内容.

我用Next.js 9.3.1.
在带有 SSR 的旧应用程序中。我可以getInitialProps在 HOC 组件中运行（而不是在页面中），所以我可以从 HOC 组件和页面中的服务器获取数据。像这样https://gist.github.com/whoisryosuke/d034d3eaa0556e86349fb2634788a7a1

例子 ：

export default function withLayout(ComposedComponent) {
    return class WithLayout extends Component {

        static async getInitialProps(ctx) {
            console.log('ctxlayout fire');
            const { reduxStore, req } = ctx || {}
            const isServer = !!req
            reduxStore.dispatch(actions.serverRenderClock(isServer))

            if (isServer) await reduxStore.dispatch(navigationActions.getListMenuAction('menu'));
            // Check if Page has a `getInitialProps`; if so, call it.
            const pageProps = ComposedComponent.getInitialProps && await ComposedComponent.getInitialProps(ctx);
            // Return props.
            return { ...pageProps }
        }

        render() {
            return …

我想定义一个泛型类型ExcludeCart<T>,它基本上是T用给定键(在我的情况下cart)删除的.所以,例如,ExcludeCart<{foo: number, bar: string, cart: number}>将是{foo: number, bar: string}.有没有办法在TypeScript中执行此操作？

这就是我想要这样做的原因,以防我咆哮错误的树:我正在将现有的JavaScript代码库转换为TypeScript,它包含一个名为的装饰器函数cartify,它接受一个React组件类Inner并返回另一个组件类Wrapper.

Inner应该采取cart道具,以及零或多个其他道具.Wrapper接受一个cartClient道具(用于生成cart要传递到的道具Inner)和任何Inner接受的道具,除了 cart.

换句话说,一旦我弄清楚如何定义ExcludeCart,我想用它来做:

function cartify<P extends {cart: any}>(Inner: ComponentClass<P>) : ComponentClass<ExcludeCart<P> & {cartClient: any}>

我通常使用组件组合来重用逻辑React方式.例如,这是一个关于如何将交互逻辑添加到组件的简化版本.在这种情况下,我会CanvasElement选择:

CanvasElement.js

import React, { Component } from 'react'
import Selectable from './Selectable'
import './CanvasElement.css'

export default class CanvasElement extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selected: false
    }

    this.interactionElRef = React.createRef()
  }

  onSelected = (selected) => {
    this.setState({ selected})
  }

  render() {
    return (
      <Selectable
        iElRef={this.interactionElRef}
        onSelected={this.onSelected}>

        <div ref={this.interactionElRef} className={'canvas-element ' + (this.state.selected ? 'selected' : '')}>
          Select me
        </div>

      </Selectable>
    )
  }
}

Selectable.js

import { Component } from 'react'
import PropTypes from 'prop-types' …

我正在用TypeScript 编写一个React高阶组件(HOC).HOC应该接受比包裹组件多一个支柱,所以我写道:

type HocProps {
    // Contains the prop my HOC needs
    thingy: number
}
type Component<P> = React.ComponentClass<P> | React.StatelessComponent<P>
interface ComponentDecorator<TChildProps> {
    (component: Component<TChildProps>): Component<HocProps & TChildProps>;
}
const hoc = function<TChildProps>(): (component: Component<TChildProps>) => Component<HocProps & TChildProps) {
    return (Child: Component<TChildProps>) => {
        class MyHOC extends React.Component<HocProps & TChildProps, void> {
            // Implementation skipped for brevity
        }
        return MyHOC;
    }
}
export default hoc;

换句话说,hoc是一个产生实际HOC的函数.这个HOC(我相信)是一个接受a的功能Component.由于我事先并不知道包装组件是什么,我使用泛型类型TChildProps来定义包装组件的道具形状.该函数还返回一个Component.返回的组件接受包装组件的道具(再次使用泛型键入TChildProps) …