如何将 img 添加为动态组件答案

【问题标题】：how can I add img as a dynamic component如何将 img 添加为动态组件
【发布时间】：2021-06-15 05:33:18
【问题描述】：

所以我要做的是向这个 div 图像添加动态值我想从这里删除整个图像将它们作为数组带到另一个组件，然后使用 map() 动态更改屏幕上的这些图像

 return (
    <div className="container">
      <div ref={sliderRef} id="slider" className="slide-wrap">
        <div
          ref={holderRef}
          id="holder"
          onMouseDown={mouseDown}
          onMouseMove={mouseMoveHandle}
          onMouseUp={mouseUp}
          onTouchStart={touchStart}
          onTouchMove={touchMove}
          onTouchEnd={touchEnd}
          className="slide_holder"
        >
          <div id="menus" className="slide_menus animation" ref={menusRef}>
            <div className="menu">
              <img
                id="img"
                className="img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/GFSJVKYET2.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
            <div className="menu">
              <img
                className="slide-img img-responsive"
                src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>

【问题讨论】：

标签： arrays reactjs dynamic slider

【解决方案1】：

你必须完全按照你说的去做。使用图像的属性创建一个数组并将它们映射到组件：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
            class Images extends React.Component {
                render() {
                    const myImages = [
                        {className: null, alt: "random-image-1", src: "https://miro.medium.com/max/5000/1*1BUIofZgqVuR6nj8LbrRtQ.jpeg"},
                        {className: null, alt: "random-image-2", src: "https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg"},
                        {className: null, alt: "random-image-3", src: "https://www.freecodecamp.org/news/content/images/2020/11/Untitled-design--1-.png"}
                    ]

                    return (
                        myImages.map((image, idx) => {
                            return (
                                <img
                                    key={idx}
                                    className={image.className}
                                    src={image.src}
                                    alt={image.alt} />
                            )
                        })
                    )
                }
            }

            ReactDOM.render(<Images />, document.getElementById("root"));
        </script>
    </head>

    <body>
        <div id="root"></div>
    </body>
</html>

看看这个 SO 问题：How to map an array of objects in React

【讨论】：

在我的示例中，数组是一个常量，如果您希望图像是动态的，则必须将它们置于组件的状态，以便您可以更改它们，并且 react 将重新渲染它。
这是我第一次做像触摸友好滑块这样的滑块，我不知道如何创建 useState 钩子，因为我可以显示数组的第一个元素，但之后我被卡住了
如果您可以更新问题以提供更多关于您卡在哪里的详细信息，我可以更新我的答案中的代码。