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

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

出于我们的目的，我们将此功能称为“创建程序”。创建程序需要能够创建多个实例 我称之为“程序”组件。它不仅需要这样做，而且在每个“程序”中，都有这样的能力 创建我称之为“练习”组件的多个实例

下面是单个程序实例的以下部分：

- 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的哪些特定功能来解决此问题。 （高阶组件、渲染道具、上下文等）

如果您可以详细说明您可能为此创建的组件层次结构，则可以获得额外的积分

---

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

这样的东西行吗

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

类程序扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
练习：[]
};
this.createExercise=this.createExercise.bind（this）；
}
createExercise（）{
const data=this.props.data；
const newExercises=[…data.exercises，{data:{}}]；
this.props.updateProgram（this.props.index{
…数据，
练习：新练习
});
}
render（）{
返回(
{JSON.stringify（this.props.data）}
{this.props.data.exercises.map（exercise=>exercise）}
创造锻炼
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
节目：[]
};
this.createProgram=this.createProgram.bind（this）；
this.updateProgram=this.updateProgram.bind（this）；
}
createProgram（）{
常量程序=[
…这个州的计划，
{data:{练习：[]}，键：Math.random（）}
];
this.setState（{programs}）；
}
更新程序（键，新数据）{
const programs=this.state.programs.map（程序=>{
如果（键===程序键）{
返回{key，data:newData}；
}
返回程序；
});
this.setState（{programs}）；
}
render（）{
返回(
程序：
{this.state.programs.map（程序=>(
))}
创建程序
);
}
}

---

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

我不知道它看起来有多么复杂，我只会使用简单的react组件，如果状态管理失控，可能会使用Redux/Mobx，但对我来说似乎没有那么复杂，这对我来说很复杂，这就是为什么我问这个问题，但你没有问一个具体的问题。将主对象作为道具传递给

程序

组件。但对于一个组件来说，这个名称很容易引起误解。我同意你的看法。也许我应该给它重新命名，这是一个非常平淡的名字。现在检查一下，每个程序组件还需要保持一个日期选择器的状态，一个数字递增/递减按钮，以及一个可点击的星期几组件。练习不是唯一需要存储在状态中的值。因此，实际上，我需要创建一个名为“练习”的组件，它保存其中所有输入值的状态，然后在单个程序组件中创建一个练习组件数组。只需告诉您有一些输入错误。练习是单词的正确拼写，而不是“练习”。这可能会让将来可能读到这篇文章的人感到困惑。非常感谢你的帮助。这对我成功地建立这一关系很有帮助。非常感谢你的帮助，我不会及时弄明白的。我做了一些不同的事情，但它让我在一个高水平上掌握了我需要做的事情。