反应解构重命名

Question

这里的尚未使用创建的目标

从一个应用程序/模块create-react-app

class Hoc extends React.Component { 
    render() { 
    const {component: Component} = this.props 
    return (
     <div> 
     <Component /> 
     </div> 
    ) 
    } 
} 

说明：

使用基本ES6解构与重命名，使反应元素可以被引用为<Component />而不仅仅是变量{component}。

我一直在从create-react-app创建的应用程序中成功使用它。这个语法记录在fullstack react书中。这个问题出现在我正在处理的两个反应模块库中，它们不是从create-react-app创建的。

可能的罪魁祸首是一个缺少babel插件。这个工作的应用程序已被弹出，所以我可以看到所有的依赖和插件，但我一直无法找到一个适用于此的应用程序。

嗯，可能是由只有create-react-app附带的反应脚本之一处理。

.babelrc

{ 
    "presets": ["es2015", "stage-2", "react"], 
    "plugins": [ 
    "add-module-exports" 
    ] 
} 

编辑：

这是最低限度的要求一个例子来显示的问题要解决。像this.props.children和{React.cloneElement(this.props.component, {...this.props})}这样的侧步解决方案并不是解决特定问题的方法。干杯!

Answer 1

如果您尝试创建高阶组件（这是我猜测的，考虑到您称为组件Hoc），那么您应该按照此处的文档：https://reactjs.org/docs/higher-order-components.html。