Question

我有一个正在通过hoc的组件，但是我想在hoc中获取该组件的一些道具。一切正常，但我无法找到如何将道具从该子组件中取出放入专案中。

这是正在通过hoc的组件，这就是我要在hoc中提取的“ getAction”道具

    class ProjectPage2 extends Component {
            
            
        render() {
                return (
                                <Project2 getAction="getAction"/>
                );  
        };  
};

export default PageHandler(ProjectPage2)

这是hoc组件（在ProjectPage2中作为PageHandler导入）

    export default (ChildComponent) => {
        class ComposedComponent extends Component {
                               
                               
                render() {     
                        // here i want to get the 'getAction' props, which is inside this ChildComponent
                        // because i need to use it into this hoc logic
                        return <ChildComponent {...this.props} />;   
             
                }   
        }   
          
        const mapStateToProps = (state) => {
                return {       
                        comments: state.project2        
                }
        };
        
        const loadData = (store) => {   
                return store.dispatch(getProject2());
        };
          
        return {               
                loadData,      
                component: connect(mapStateToProps, { getProject2 })(ComposedComponent)
    
        }
};

如果有人有一个主意，那就太好了。谢谢。

Answer 1

我认为您已经很接近了。在我看来，您希望最终结果是这样的：

<Project2 getAction="getAction" comments={...} />

但是最终呈现出来的只是：

<Project2 getAction="getAction" />

看，HOC的自定义道具通过孩子的道具传递给孩子的组件。您没有使用这些，所以孩子只是完全忽略了HOC。您可以使用以下方法解决此问题：

class ProjectPage2 extends Component {
    render() {
        return (
            <Project2 getAction="getAction" {...this.props} />
        );  
    };  
}

Answer 2

谢谢您的回答。但这不是我想要的。我想将一些子组件的道具通过HOC。但是我终于有了解决它的想法。其实很简单……

我想将“ getAction”字符串传递到HOC中。但是我没有找到任何解决方案来提取它（从传递组件中）。解决方案就是将其传递到导出默认值中

class ProjectPage2 extends Component {
            
            
        render() {
                return (
                                // i was trying to use the component props
                               // <Project2 getAction="getAction"/>
                               // but no need
                               <Project2 />
                );  
        };  
};
// pass it into the fonction fix it
export default PageHandler(ProjectPage2, "getAction")

然后在HOC中获取它

 export default (ChildComponent, varAction) => {
        class ComposedComponent extends Component {
                          console.log(varAction) // return getAction

通过hoc从儿童组件获取道具

2 个答案: