Question

我正在编写一个React应用程序，该应用程序负责从外部CMS中重新发送内容。

当应用程序首次加载时，内容将从CMS中提取到redux存储中，并在整个生命周期内通过连接的组件或道具进行访问。

我需要使用CMS'd内容在所有组件中使用某些方法。

在研究实现这一目标的“React”方法后，似乎以下方式通常不赞成，而使用更高阶的组件被视为更好的做法。来自OO背景，我很难理解为什么？

例如......

import React, { Component } from 'react';

class CMSComponent extends Component {

    constructor(props) {
        super(props);       
    }

    mySharedMethod(path) {
        // Assume CMS content is located in this.props.content unless otherwise stated
        // Please be aware that the actual code has been simplified massively for the sake of the question

        return this.props.content[path]
    }
}

我现在有一个所有CMS组件都可以继承的基类，就像这样......

import CMSComponent from './components/cms'

class Page1 extends CMSComponent {

    constructor(props) {
        super(props);       
    }

    render() {

        // mySharedMethod() inherited from base class

        return <div>{ this.mySharedMethod(['data', 'intl', 'my-keyed-content']) }</div>
    }
}

如果有人能说清楚为什么这被认为是不正确的话，我将非常感激。

作为参考，我猜使用HOC的相同场景看起来像这样......

import React, { Component } from 'react'

export default function CMSInject(ChildComponent) {

    class CMSComponent extends Component {

        constructor(props) {
            super(props);       
        }

        mySharedMethod(path) {
            return this.props.content[path]
        }

        render() {

            return <ChildComponent {...this.props} {...this.state} /* and some refs */ />
        }
    }

    return CMSComponent
}

...然后通过更高阶的父组件导出子项...

import React, { Component } from 'react'

class Page1 extends Component {

    constructor(props) {
        super(props);       
    }

    render() {

        // mySharedMethod() still inherited from base HOC class

        return <div>/* CMS BASED CONENT HERE */</div>
    }
}

export default CMSInject(Page1)

子类化反应组分，HOC或经典OO？

0 个答案: