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

Posted 2023-02-22

【中文标题】如何渲染存储在 redux reducer 中的 reactjs 组件？

【英文标题】：How to render a reactjs component stored in a redux reducer?

【发布时间】：2016-04-22 07:55:54

【问题描述】：

我有一个加载了几个 reactjs 组件的 redux reducer。

我想通过this.props将这些加载到其他组件中

点赞：this.props.components.MyReactComponent

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

这可能吗？如果有，怎么做？

EDIT 该组件是一个连通组件。我可以加载它，但它坏了。在这种情况下，它是一个计数器，当您单击以增加或减少时，不会发生任何事情。在控制台中，出现这个错误：

Uncaught ReferenceError: _classCallCheck is not defined

如果我将组件转换为哑组件（不连接它），错误是这样的：

Uncaught ReferenceError: _classCallCheck3 is not defined

编辑 2

我发现了为什么会出现这些错误。这是因为 React 组件在存储在 reducer 中时会被剥离：

一个反应组件看起来像这样：

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

但是，在我将它存储在减速器中之后，它会失去其属性并最终看起来像这样：

 function:
    [Function: Connect]  

看完下面的cmets，我想到了一个替代方案。我可以将每个组件的路径存储在 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 遵循 Thomas 的建议...

我想要完成的是：

我希望能够在其他 React 组件中渲染 React 组件，我知道如何做到这一点，就像我们大多数人都知道的那样；但是，我希望能够通过导入一个包含所有组件的文件来做到这一点，而无需实际导入和导出每个组件：

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

当我尝试这样做时，我遇到了多个问题，第一，export 语句必须在顶层，第二，fs 只能在服务器端工作。

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

然后，我想只将这些组件的路径存储在减速器中，并有一个包装组件，该组件将使用该路径指向所需组件的require。这种方法几乎成功了，但 nodejs 函数 require 不允许我将变量作为参数传递（如 EDIT 2 所示）

【问题讨论】：

为什么要在减速器中加载/存储组件？

@Joe 因为我正在试验并想加载存储在减速器中的组件。顺便说一句，我可以让组件显示，但它坏了，我会更新我原来的问题来解释这一点。

只是我在stores中只遇到过普通的json类型数据对象（然后在reducer函数中对其进行操作），所以我被你的问题抛出了。将你的 react 组件本身存储在 store 中不会使事情变得过于复杂吗？

同意。乔，这似乎过于复杂，而且绝对不是常见的用例 w。还原。这是来自 Redux 文档 (rackt.org/redux/docs/basics/Reducers.html) 的引用：Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation。我想说的是，您和您的应用从 Redux 商店中收听值会更容易，并基于该值呈现给定的组件。

@Joe 我更新了我的问题，这是我存储在减速器中的组件被剥离的原因吗？我正在扫描一个装满组件的文件夹，并尽量避免使用索引来导出每个组件。所以我希望能够将它们导入到其他组件中，而无需手动导出。

【参考方案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/';