反应解构重命名

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），那么您应该按照此处的文档进行操作：{{3} }。