如何在 React 中创建组件的 props.children 元素的索引数组

Question

我正在尝试构建一个轮播应用程序，您可以在其中将轮播项目作为轮播组件的 children 放置。

   return (
    <div className="carousel-container" style={{width: containerWidth}}>
    <button className="button-left" >L</button>
    <button className="button-right" >R</button>
    <div className="carousel-slider" style={{
        display: "flex",
        flexDirection: "row",
         flexWrap: "none",
      overflow: "scroll",
     alignItems: "center",
    height: props.height, 
    width: "100%", 
    }}>
        {props.children}
    </div>
    </div>
)

我希望能够将此轮播滚动到所选 child。我认为我应该这样做的方法是让 button-left 和 button-right 元素滚动到 next/previous child 的索引。但是，我无法获取 children 的索引来告诉应用程序滚动到某个 child.

有谁知道我可以获取“carousel-slider”的 props.children 的索引的方法，将它们放在一个数组中，然后滚动到相应的 child按下 left/right 按钮？ children 是 HTML emenets，如 divs 或 imges。

Codesandbox：https://codesandbox.io/s/hardcore-goodall-usspz?file=/src/App.js

P.S。我知道那里有非常酷的轮播插件。我这样做是为了在 React 上做得更好。

Answer 1

您可以使用 React.Children.toArray 将 children 道具变成子级数组。来自文档：

Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.

一旦有了数组，就可以对数组使用索引。

如何在 React 中创建组件的 props.children 元素的索引数组

How can I create an array of indexes of props.children elements of a component in React

javascript

carousel

reactjs

react-props