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

UI（不同的模块，例如用户，管理员，管理员。这些模块是分别实施并在其他端口上启动）- 在React，Redux，Axios等中实现。
Nginx
后端-用Java作为API实现
数据库

我们有以下要求：

假设UI模块中包含以下组件：

component1：

field1
field2
field3

component2：

field1
field2

component3：

field1
field2
field3
field4

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

（我们不想每次都更改代码。这意味着，当客户按其布局询问时，我们不想在那时自定义代码。我们可以开发任何实用程序/设计模式/方法吗？我们可以选择要显示/替换的字段以及其他所有内容都可以正常使用？）

customer1：

component1：

field1
field2
cust_field3（而不是field3）

全新的自定义组件2：

cust_field1
cust_field2

component3：

field1
field2
cust_field3（而不是field3）
field5（而不是field4）

customer2：

component1：

cust_field1
field2
field3
field4（此组件中此客户的新功能）

component2：

field1
field2
field3（新）

component3不需要并已完全删除

问题：

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

需要支持。我坚持这一要求。

Answer 1

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

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

如果需要使用合成（出于各种原因，首选使用合成），则需要使用一个高阶组件（HOC）来替换原始的render方法。这是一个链接，但是如果您搜索该词，则会找到更多选择。 https://blog.callstack.io/sweet-render-hijacking-with-react-bb2b81d8d9be

如果您不介意并且只需要快速工作，则可以扩展Component1类，编写一个新的render方法，然后跳过不需要增强的方法。

例如

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>
    );
  }
}

请记住，这是伪代码，没有修复程序就无法工作

无论哪种方式，您都可以为每个包装创建包装，也可以为所有包装创建一个包装。您将与客户相关的所有字段作为“孩子”传递。

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

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

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

我们有以下要求：

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

（我们不想每次都更改代码。这意味着，当客户按其布局询问时，我们不想在那时自定义代码。我们可以开发任何实用程序/设计模式/方法吗？我们可以选择要显示/替换的字段以及其他所有内容都可以正常使用？）

customer1：

customer2：

问题：

1 个答案: