Question

我的任务是在现有项目中创建一个新的React组件。该项目由几个子项目组成。其中两个是：

WebApp：包含大多数应用程序逻辑，Redux存储和连接到Redux存储的“智能” React组件。
Design：包含经过样式设置且可以具有自己的本地状态的“哑” React组件。

其中一项项目规则说，Design个组件可以导入WebApp中，反之亦然。因此，如果“哑”组件需要执行存储操作，则其中一个“智能”组件必须使用mapDispatchToProps公开该操作，并将其一直传递到“哑”组件。 / p>

我的新组件的问题在于，它可以在项目的许多地方使用，有时在“哑”组件链中很深。因此，如果我遵循项目规则，则必须使用我的组件应接收的所有新属性来更新很多“哑”组件。

为避免这种情况，我尝试使用类似HOC的“智能”组件，并将其通过React上下文传递给我的“哑巴”组件。我之所以说“类似HOC”，是因为它不是经典的HOC，而是使用render property的HOC。

我来自WebApp的“智能”组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MySmartComponent extends Component {
  render() {
    return (
      <>
        {this.props.render({
          someAction: this.props.someAction,
        })}
      </>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  someAction: payload => {
    /* something happens*/
  },
});

export default connect(mapDispatchToProps)(MySmartComponent);

我来自Design的“哑巴”部分：

import React, { Component } from 'react';

export const MyContext = React.createContext({});

class MyDumbComponent extends Component {
  render() {
    return (
      <MyContext.Consumer>
        {({ MySmartComponent }) => {
          return (
            <MySmartComponent
              render={({ someAction }) => (
                <>/* someAction can be used here */</>
              )}
            />
          );
        }}
      </MyContext.Consumer>
    );
  }
}

export default MyDumbComponent;

然后在MySmartComponent的某些根组件中提供WebApp作为上下文：

import React, { Component } from 'react';
import { MyContext } from 'Design/MyDumbComponent';
import MySmartComponent from 'WebApp/MySmartComponent';

const myContext = { MySmartComponent };

class SomeRootComponent extends Component {
  render() {
    return (
      /* ... */
      <MyContext.Provider value={myContext}>
        {this.props.children}
      </MyContext.Provider>
      /* ... */
    );
  }
}

export default SomeRootComponent;

我怀疑这可能是对React上下文的滥用。也许这只是一个不好的做法？但是那么，不利之处可能是什么？

可以通过React上下文传递HOC吗？

0 个答案: