Question

我希望组件的逻辑可以被单独的无状态组件的render方法访问。

原因是应用程序的桌面版本将使用相同的逻辑和类方法，但它的呈现方式会有所不同。

class Logic {
  constructor() {
    this.greeting = 'Buongiorno'
  }

  showCats() {
    return 'Mittens and Puss'
  }
}

const Desktop = () => {
  return <div style={{ fontSize: 30 }}>
    {this.showCats()}
    {this.greeting}
  </div>
}

const Mobile = () => {
  return <div style={{ fontSize: 15 }}>
    {this.greeting}
    {this.showCats()}
  </div>
}

因此，我正在尝试粘合＆＃39;功能组件的类。

我可以不将道具传递给无状态组件吗？

无状态组件如何访问Logic类中的方法和变量？

我知道我可以制作Desktop和Mobile extend Logic类的有状态组件，但我不确定这是最好的做法。

Answer 1

    function Logic(wrappedComponent) {
       showCats() {
        return 'Mittens and Puss'
      }
      return (
        <wrappedComponent
        greetings="Buongiorno"
        showCats=showCats

        >
        {this.props.children}
        <wrappedComponent />
     )

    }

    const Desktop = () => {
      return <div style={{ fontSize: 30 }}>
        {this.props.greeting}
        {this.props.showCats()}
      </div>
    }
   export default Logic(Desktop)

    const Mobile = () => {
      return <div style={{ fontSize: 15 }}>
        {this.props.greeting}
        {this.props.showCats()}
      </div>
    }
    export default Logic(Mobile)

高阶组件通常用于保持不同组件之间的通用功能。请在此处详细了解https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.do3h4kouk

Answer 2

此任务可以通过使用“更高阶组件”方法来解决。您的HoC可能如下所示：

"use strict";
import React, {Component} from "react";

const getDisplayName = (Component) => Component.displayName || Component.name || 'Component';

/**
 * Higher order component to inject logic into provided component
 */
export const withLogic = Component => {
    class WithLogic extends Component {
        //noinspection JSUnusedGlobalSymbols
        static displayName = `WithLogic(${getDisplayName(Component)})`;

        get logic() {
            if (!this._logic) {
                this._logic = new Logic();
            }
            return this._logic;
        }

        render() {
            return <Component {...this.props} />;
        }
    }

    return WithLogic;
};

它的用途是一种组合模式，广泛用于React：

export default withLogic(Mobile);

在单独的渲染之间共享React组件逻辑

2 个答案: