React 中具有动态字段的动态组件

Question

我知道还有很多其他的问题答案与在反应中做一个动态组件有关。 但是在我们的项目中，有一个不同的要求。

我们的项目结构是这样的：

• UI（不同的模块，如用户、经理、管理员。这些模块是 在不同的端口上单独实施和启动）- 在 React、Redux、Axios 等中实现。
• Nginx
• 后端 - 在 Java 中作为 API 实现
• 数据库

我们有如下要求：

假设在 UI 模块中有如下组件：

组件1：

• 字段1
• 字段2
• 字段3

组件2：

• 字段1
• 字段2

组件3：

• 字段1
• 字段2
• 字段3
• 字段4

我们需要根据客户需求更改这些组件（客户可以是#n。不固定）。

（我们不想每次都更改代码。意思是，当客户根据他们的布局要求时，我们不想自定义代码。我们可以开发任何实用程序/设计模式/方法，使用它我们可以选择要显示/替换的字段，其他一切都照原样工作？）

客户1：

组件1：

• 字段1
• 字段2
• cust_field3（而不是 field3）

全新的自定义组件2：

• cust_field1
• cust_field2

组件3：

• 字段1
• 字段2
• cust_field3（而不是 field3）
• field5（而不是 field4）

客户2：

组件1：

• cust_field1
• 字段2
• 字段3
• field4（此组件中为该客户新增）

组件2：

• 字段1
• 字段2
• field3（新）

component3 不需要并已完全删除

问题：

1. React 中是否有进行这种开发的方法？
2. 我是否需要实施任何实用程序来为客户选择此类组件？
3. 我是否需要使用不同的技术堆栈或第三方库进行反应？如果有，请提供这方面的详细信息。
4. 对于这种需求，我是否需要使用 JSON 动态呈现（存储在任何数据库中）？
5. 我需要使用任何不同的设计模式或不同的方法吗？还有什么？
6. 为此需要付出多少努力？反应真的很复杂吗？

在这方面需要支持。我坚持这个要求。

Answer 1

在 React 中有多种方法可以实现这一点。 主要问题是您是否可以更改这些组件的代码。

如果您不能： 您必须通过应用著名的“渲染劫持”版本来根据客户需求创建新组件。

如果您需要它与合成一起使用（由于各种原因，从继承中首选合成），您需要应用替换原始渲染方法的高阶组件 (HOC)。 这是一个链接，但如果您搜索该术语，您会发现更多选项。 https://blog.callstack.io/sweet-render-hijacking-with-react-bb2b81d8d9be

如果您不介意并且只需要它快速工作，请继续扩展 Component1 类，编写一个新的渲染方法并跳过不需要增强的方法。

例如

class Component1v1 extends Component1 {
  render() {
    return(
      {'My old and My new stuff'}
    );
  }
} 

如果您可以编辑现有组件，您有多种方法可以实现这一点。

选项1： 条件渲染

不是我的一杯茶，但在某些情况下它是有道理的： 例如

class Component1 extends React.Component {
  ...
  render() {
    return(
      <input1/>
      <input2/>
      {customer2 && <input3_cust2/> : <input3/>}  
    );
  }
} 

一般来说，为每个客户都编辑组件是没有意义的，所以我会选择一个包装器组件来呈现其他组件并增强他们的能力。据我所知，最好将大部分处理留给包装器以保持一致。

选项2： 传递额外孩子的包装器

例如

class Component1 extends React.Component {
    render() {
      return(
        <div>
          <input1 onChange={this.props.onChange}/>
          <input2 onChange={this.props.onChange}/>
          {...this.props.children}
        </div>
      );
    }
}

class Wrapper extends React.Component {
  handleChange(e) {
    return null;
  }

  render() {
    return(
      <Component1 onChange={this.handleChange}>
        <input3 onChange={this.handleChange}/>
      </Component1>
    );
  }
}

请记住，这是伪代码，如果没有修复它将无法工作

无论哪种方式，您都可以根据用途为每个或一个包装器创建包装器。您将需要与客户相关的所有字段作为“子项”传递。

正如我之前提到的，拥有需要根据客户端进行修改的组件并没有多大意义，您可能需要花一些时间以适合您的方式对视图层和逻辑进行分组和拆分.这意味着您需要重新定义您的组件。