Question

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

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

以下是单个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。如果它立刻不明显，单击“添加程序”按钮将在屏幕上生成一个全新的程序组件。 Theres目前不限制可以创建的数量。

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

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

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

1 个答案: