javascript - ReactJS - 如何检测一个元素是 ReactJS 中其父元素的第 n 个_第一个_还是最后一个子元素？

Question

我正在尝试在 ReactJS 中进行一些动态移动，因此我需要检查子节点相对于其父节点的位置，请问我如何在 ReactJS 中检测到它？

我看过this post但它是用于组件之间的检测，而不是特定组件内部，例如:

<div
className={style.carousel}
>
     <div 
         id={style.carousel_item_one}
     > 
              carousel_item_1 // => first child, but how detect it?

     </div>
     <div 
         id={style.carousel_item_two}
     > 
              carousel_item_2 // => nth child, but how detect it?
     </div>
     <div 
         id={style.carousel_item_three}
     > 
              carousel_item_3 // => last child, but how detect it?
     </div>
</div>

任何提示都会很棒，

谢谢

Answer 1

好的。这是我将如何处理这个问题(根据我的评论)。简而言之，使用一组对象来描述您的轮播面板，然后 map在它上面，每次迭代创建一个新面板。每个面板都有附加的数据属性，描述当前面板索引和数组长度。然后这些可以在点击处理程序中用作计算的一部分。

class Carousel extends React.Component {
  
  constructor() {
    super();

    // Make sure you bind your handler
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {

    // Destruct the id and length from the target dataset
    const { dataset: { id, length } } = e.target;

    // Here you would perform your calculation
    console.log(id, length);
  }

  render() {

    // Get the panel data we passed in
    const { panels } = this.props;

    // Grab the length of the panel array
    const { length } = panels;

    // `map` over the panels array to create a new panel with each
    // iteration. Note we also use `map`'s index parameter 
    return panels.map((panel, index) => {

      // Add the index, length as element data attributes
      return (
        <div
          key={index}
          data-id={index}
          data-length={length}
          className="carouselItem"
          onClick={this.handleClick}
          >
          {panel.desc} ({index} of {panels.length})
        </div>
      );
    });  
  }
}

// Panel data
const panels = [{ desc: 'Panel 1' }, { desc: 'Panel 2' }, { desc: 'Panel 3' }];

ReactDOM.render(

  // Pass in the panel data as props
  <Carousel panels={panels} />,
  document.getElementById('container')
);

.carouselItem {
  display: inline-block;
  margin-right: 1em;
  padding: 0.3em;
  border: 1px solid #dfdfdf;
}

.carouselItem:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>