Question

在我的应用程序中，我将特定视图的顺序随机化。但是，我在显示正确的视图序列号时遇到问题。

因此，第一个视图的编号应为1，第二个视图的编号应为2，依此类推。由于它们被随机排列在数组中，所以我不知道如何预先访问视图的订单号。然后应该将正确的数字作为道具传递给特定的视图组件，以便显示它。

 shuffle(arr) {
    var i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
    return arr;
  };

 constructor() {
      const componentArray = [<Tasks incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />, <APM incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />, <ICAA incrementSequenceCounter={this.incrementSequenceCounter} count={this.state.count} />]

      const shuffledArray = this.shuffle(componentArray);

      this.state.shuffledArray = shuffledArray;
    }

该组件应该以某种方式知道其在数组中的索引，但是我不知道从哪里开始。

Answer 1

您的数组元素应在重排之前包装在一个对象中

const componentArray = [
  {
    index: 0,
    component: <MyComponent />
  }

];

您可以使用简单的map()从数组中创建它：

const indexArray = componentArray.map((el, i) => ({ index: i, component: el });

然后，您可以安全地随机播放 indexArray

Answer 2

首先，我不喜欢在构造函数中初始化组件的想法。这基本上使它们成为静态的，但这可能就是您所追求的。这是我的尝试：

constructor() {
      const componentArray = [ 
          {
             type: Tasks, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          }, 
          {
             type: APM, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          },
          {
             type: ICAA, 
             props: { 
                 incrementSequenceCounter: this.incrementSequenceCounter,  
                 count: this.state.count 
               }
          }


      const shuffledArray = this.shuffle(componentArray);

      this.state.shuffledArray = shuffledArray.map(
            (componentConstructor, index) => React.createElement(componentConstructor.type, { ...componentConstructor.props, index })
     );
}

基本思想是在确定顺序后构造它们。这里的明显缺点是，由于这是在构造函数中发生的，因此父组件中的任何状态更改都不会反映在这些子组件中。如果您不希望这样做，则应将其移至render和/或componentDidMount / Update

注意：基于其他答案，我需要澄清，根据我的理解，问题是如何将改组后的组件最终索引传递给组件本身。这与其他人的回答不同，因此，如果我理解不正确，请告诉我

如何对数组中的随机元素编号？

2 个答案: