Question

我有一个类似的功能：

export const fireView = (prop1, prop2) => WrappedComponent =>
    class extends Component {
    //stuff in here
}

然后是这样的专案：

export const withFireView = (prop1, prop2) =>
    fireView(prop1, prop2)

但是现在我想将此函数放到compose中，因为我需要用mapStateToProps

来调用它

所以我这样做了：

compose (
    connect(mapStateToProps),
    fireView
)

但它由于You must pass a component to the function returned by connect

而中断

所以我然后摆脱了fireview函数中的参数，我认为这会起作用，但是由于我没有传递参数，所以现在函数中的所有参数都未定义

有没有办法做这样的事情：

compose (
    connect(mapStateToProps),
    fireView(arg1, arg2)
)

但是很明显，如果有意义的话，就不会在其中定义它们。

Answer 1

这是一个完整的示例：

var Component = React.Component;
var render = ReactDOM.render;
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
var createStore = Redux.createStore;
var compose = Redux.compose;
    
const reducer = () => {return {}};
const mapStateToProps = () => {
  return {}; 
};
    
const wrapped = (props) => {
  return <div>{props.prop1} {props.prop2}</div>;
}
const fireView = (prop1, prop2) => WrappedComponent => {
  return class extends Component {
    render() {
      return <WrappedComponent prop1={prop1} prop2={prop2} />; 
    }   
  }
} 
    
const withFireView = (prop1, prop2) => fireView(prop1, prop2);
    
const withFireViewAndConnect = (arg1, arg2) => compose(connect(mapStateToProps), withFireView(arg1, arg2));
    
const App = withFireViewAndConnect('some', 'arg')(wrapped);
    
render(<Provider store={createStore(reducer)}><App /></Provider>, document.getElementById('demo'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.13.0/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.js"></script>

<div id="demo"></div>

Answer 2

您可以使withFireView返回一个函数。都可以。

export const withFireView = (prop1, prop2) => () => fireView(prop1, prop2)

Answer 3

我有类似的要求，并最终显示在此页面上。我以为我们无法理解用例。我将尝试对其进行总结并提供答案。

说明

我们可以在React中使用HOC (Higher Order Components)来抽象出通用功能。在React文档中，我们可以看到“ with”符号来使用这些HOC。我也在我的应用程序上创建了一些。

withSplashScreenRedirect, withHistoryObject

我创建的所有这些HOC都使用一个组件（ WrappedComponent ）并返回一个组件。（无需其他参数）。

const EnhancedComponent = HigherOrderComponent（WrappedComponent）;

我通常在每个屏幕级别组件上都有大约2至3个HOC。将这些HOC编写为返回其他函数的函数看起来很丑。 Redux提供了一个有用的compose函数。 Compose帮助我们以更易读的方式链接这些HOC。

来自撰写文档。

所有compose所做的就是让您编写深层嵌套的函数转换，而无需向右移动代码。不要给它太多的荣誉！

很快，我想创建另一个HOC，以标准化我的API调用逻辑和API调用处理逻辑。在这种情况下，我必须向HOC发送两个附加功能（以及包装组件）。

withApiCallHandler(WrappedComponent, makeApiCall, handleApiResponse)

将道具传递给HOC并不重要。 React Docs有一个很好的例子来说明如何做。但是，将这种HOC添加到组成链并不是那么简单。我想这就是OP想要在这里问的。

答案

我无法找到将这种HOC与compose链接的方法。也许不可能。最好的解决方案是分别初始化withApiCallHandler组件，然后将其与compose链接。

代替

const ComposedScreenComponent = compose(
  withHOC1,
  withHOC2,
  withHOC3(arg1, arg2)
)(ScreenComponent);

执行此操作

const withHOC3AndArgs = (WrappedComponent) =>
  withHOC3(WrappedComponent, arg1, arg2);

const ComposedScreenComponent = compose(
  withHOC1,
  withHOC2,
  withHOC3AndArgs(arg1, arg2)
)(ScreenComponent);

这不是对这个问题的最佳答案，但是如果有人被卡住了，那么此解决方案肯定是一个不错的解决方法。

如何将参数传递给compose内部的函数？

3 个答案: