反应解构重命名答案

【问题标题】：React destructuring rename反应解构重命名
【发布时间】：2017-08-31 23:04:59
【问题描述】：

这是目标

来自尚未使用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})} 这样的侧步解决方案不是针对特定问题的解决方案。干杯！

【问题讨论】：

我认为将组件作为道具传递更像是一种反模式。如果该组件可能会更改，您可以只为它应该是哪个组件设置一个标志道具，然后对每个可能的组件使用常规导入并使用逻辑来呈现正确的组件。或者，如果您只是将其传递给孩子，请使用this.props.children。
你能展示你的 babel 配置吗？

标签： reactjs babeljs create-react-app

【解决方案1】：

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

【讨论】：