创建复杂 React 组件的多个实例

Question

我目前正在努力为以下需要构建的功能提出一个优雅的解决方案：

出于我们的目的，我们将此功能称为“创建程序”。 Create Program 需要具备创建多个实例的能力 我称之为“程序”组件。它不仅需要这样做，而且在每个“程序”内部，也有能力 来创建我称之为“练习”组件的多个实例。

以下是单个 Program 实例的分解片段：

- Date Range Picker
- Number Increment/Decrement Input Field
- Day Picker
- Exercise (Multiple instances can be spawned within the Program instance)
  - Everything else inside of exercise is self explanatory...

我已经开始概念化实现这一目标可能需要的数据结构。我的想法是 某种类型的高阶组件将用于获取某种类型对象中的所有状态 或数组。下面，我创建了一个对象形式的示例，每个键代表一个程序实例。

// A master object that contains the state for all of the program instances that are currently on the screen
{
  // A single program 
  0: {
    dateStart: ''
    dateEnd: '',
    sessionsPerDay: 0
    daysOfTheWeek: [],
    exercises: [
      // A single exercise
      {

      }
    ]
  },
  1: {
    dateStart: ''
    dateEnd: '',
    sessionsPerDay: 0
    daysOfTheWeek: [],
    exercises: [
      // A single exercise
      {
        ...
      }
    ]
  }
}

我觉得我正在为如何以一种干净、高效的方式执行此操作进行高级规划。我希望从某人那里得到一个深思熟虑的答案 解释他们将如何解决这个问题，以及他们将使用 React 的哪些特定功能来解决这个问题。 （高阶组件、渲染道具、上下文等...）

如果您可以详细说明您可能为此创建的组件层次结构，则可以加分。

PS。如果它没有立即显现，单击“添加程序”按钮将在屏幕上生成一个全新的程序组件。目前可以创建的数量没有限制。

Answer 1

这样的东西不能用吗？

class Program extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      exercise: []
    };
    this.createExercise = this.createExercise.bind(this);
  }

  createExercise() {
    const data = this.props.data;
    const newExercises = [...data.exercises, { data: {} }];
    this.props.updateProgram(this.props.index, {
      ...data,
      exercises: newExercises
    });
  }

  render() {
    return (
      <div>
        {JSON.stringify(this.props.data)}
        {this.props.data.exercises.map(exercise => <span>Exercise</span>)}
        <button onClick={this.createExercise}>Create exercise</button>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      programs: []
    };
    this.createProgram = this.createProgram.bind(this);
    this.updateProgram = this.updateProgram.bind(this);
  }

  createProgram() {
    const programs = [
      ...this.state.programs,
      { data: { exercises: [] }, key: Math.random() }
    ];
    this.setState({ programs });
  }

  updateProgram(key, newData) {
    const programs = this.state.programs.map(program => {
      if (key === program.key) {
        return { key, data: newData };
      }
      return program;
    });
    this.setState({ programs });
  }

  render() {
    return (
      <div>
        Programs:
        {this.state.programs.map(program => (
          <Program
            index={program.key}
            key={program.key}
            data={program.data}
            updateProgram={this.updateProgram}
          />
        ))}
        <button onClick={this.createProgram}>Create program</button>
      </div>
    );
  }
}

你不需要任何花哨的东西。如果它失控了，那么你可以使用状态管理解决方案来改进它，但除此之外，我看不出有什么用处