Question

我有一个装有几个reactjs组件的redux reducer。

我想通过this.props

在其他组件中加载这些内容

赞：this.props.components.MyReactComponent

class OtherComponent extends Component {
  render() {
    const Component = this.props.components.MyReactComponent
    return (
      <div>
        <Component />
      </div>
    )
  }
}

这可能吗？如果是这样，怎么样？

编辑该组件是一个连接组件。我能够加载但它已经坏了。在这种情况下，它是一个计数器，当你点击增加或减少没有任何反应。在控制台中，出现此错误：

Uncaught ReferenceError: _classCallCheck is not defined

如果我将组件转换为哑组件（不连接它），则错误如下：

Uncaught ReferenceError: _classCallCheck3 is not defined

编辑2

我发现了为什么会出现这些错误。这是因为当储存在减速器中时，反应组分会被剥离：

反应组件看起来像这样：

{ function:
   { [Function: Connect]
     displayName: 'Connect(Counter)',
     WrappedComponent: { [Function: Counter] propTypes: [Object] },
     contextTypes: { store: [Object] },
     propTypes: { store: [Object] } } }

然而，在我将它存储在reducer中之后，它会丢失它的属性并最终看起来像这样：

{ function:
   { [Function: Connect] } }

阅读下面的评论后，我想到了另一种选择。我可以在reducer中存储每个组件的路径，然后创建一个新的包装器组件，可以从这些路径中呈现那些其他组件。

我尝试了它但是遇到了来自nodejs的函数require的另一个问题，因为一些奇怪的原因是不允许我将变量用作参数。例如：

这有效：

var SomeContent = require('../extensions/myContent/containers')

这不是：

var testpath = '../extensions/myContent/containers'
var SomeContent = require(testpath)

给我以下错误：

Uncaught Error: Cannot find module '../extensions/myContent/containers'.

在路径的末尾添加句点。如何阻止require添加该期限？

如果你能想到任何其他我可以实现我想做的事情，我将不胜感激。

编辑3 遵循托马斯的建议......

我想要完成的是：

我希望能够在其他反应组件中呈现反应组件，我知道如何以大多数人知道的方式执行此操作;但是，我希望能够通过导入一个包含所有组件的文件来实现，而不必实际导入和导出每个组件：

OtherComponent.js

import React, { Component } from 'react'
import { SomeComponent } from '../allComponentes/index.js'

export default class OtherComponent extends Component {
  render() {
    return (
      <SomeComponent />
    )
  }
}

SomeComponent.js

import React, { Component } from 'react'

export default class SomeComponent extends Component {
  render() {
    return (
      <div>
        Hello
      </div>
    )
  }
}

allComponents / index.js

import SomeComponent from '../allComponents/SomeComponent/index.js'

export { SomeComponent }

我在allComponents/index.js尝试做的是避免通过读取（使用fs模块）allComponents文件夹中的所有组件并导出每个组件的导入/导出语句他们。

allComponents / index.js（伪代码）

get all folders inside allComponents folder
  loop through each folder and require the components
    store each component inside an object

export object

当我尝试这样做时，我遇到了多个问题，其中一个，导出语句必须位于顶层，其次，fs只能在服务器端工作。

所以，这就是为什么我想在加载器中加载所有组件然后将它们作为道具传递。但是，正如我发现的那样，当它们存放在减速器中时，它们被剥离了。

然后，我想到只将那些组件的路径存储在reducer中，并且有一个包装器组件，它将使用该路径require所需的组件。这个方法几乎已经解决了，但nodejs函数require不允许我将变量作为参数传递（如编辑2所示）

Answer 1

我认为你的问题不是与redux有关，而是（如你所说）：

What I am trying to do in allComponents/index.js is to avoid having import/export statements for each component by reading (with fs module) all the components inside the allComponents folder and export them.

举例来说，我将所有（哑）表单组件放在文件夹路径components/form-components中，index.js看起来像：

export FieldSet from './FieldSet'
export Input from './Input'
export Label from './Label'
export Submit from './Submit'
export Select from './Select'
export Textarea from './Textarea'

然后，当我想在其他地方导入组件时，它是import { FieldSet, Label, Input, Submit } from '../../components/form-components/';

如何渲染存储在redux reducer中的reactjs组件？

1 个答案: