反應解構重命名

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。