1

你好堆栈溢出社区，提前感谢你的帮助我是一个相当新的反应本机的人。对于这个项目，我已经导入了库 nuka-carousel。所以我想做的是获取一个动态的图像列表并将它们放入一个轮播对象中。我不确定 1 如何获取数据和 2 如何有一个循环将它们全部放入同一个对象中。现在我已经将它设置为接受静态输入，但我希望它是动态的。

这是图像列表数据的样子

[{"id":4,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4,"record":{"id":4,"c_dzp64j57b0pm6b8clmddapump":"test4","created_at":"2020-06-11T18:16:36.443Z","updated_at":"2020-06-11T18:16:36.443Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"68ca15c0503a7bc6850d9e8f52d2e3a4302b75a00d6b6b48b759980f02f4ee56.gif","size":13473,"width":300,"height":300,"filename":"file.gif"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4}}}},{"id":3,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3,"record":{"id":3,"c_dzp64j57b0pm6b8clmddapump":"test1","created_at":"2020-06-11T16:29:14.713Z","updated_at":"2020-06-11T18:15:24.949Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"19cb397219e0e95d9a0ebc42de7d6012a9b5965b5eca112ef37f0ff374642c01.jpg","size":5557,"width":275,"height":183,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3}}}},{"id":2,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2,"record":{"id":2,"c_dzp64j57b0pm6b8clmddapump":"test2","created_at":"2020-06-11T16:29:04.801Z","updated_at":"2020-06-11T18:15:07.995Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg","size":7595,"width":284,"height":177,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2}}}},{"id":1,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1,"record":{"id":1,"c_dzp64j57b0pm6b8clmddapump":"test3","created_at":"2020-06-11T16:28:59.989Z","updated_at":"2020-06-11T18:15:15.956Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg","size":5503,"width":168,"height":300,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1}}}}]

我希望能够将这些数据中的网址放入轮播中。这是我现在拥有的代码，它目前是硬编码的。图像列表称为图像

返回 （

                    <Carousel renderCenterLeftControls={false} renderCenterRightControls={false} renderCenterLeftControls={({ previousSlide }) => (
                        <button onClick={previousSlide}> <Icon name={button.Previcon} size={28} color={button.Prevcolor} /> </button>

                    )}   renderCenterRightControls={({ nextSlide }) => (
                        <button onClick={nextSlide}> <Icon name={button.Nexticon} size={28} color={button.Nextcolor} /> </button>



                    )}   defaultControlsConfig={{
            pagingDotsStyle: {
                fill: Indicator.Secondarypcolor,

            }
            }} >





                            <img src="https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />
                        </Carousel>
                )

所有轮播的东西都有效，但我需要能够将这些网址放在轮播中，但是当我试图在标签内放置一个循环时，它会中断。

4

2 回答 2

0

如果我理解正确，您想映射数组并返回图像。我会做这样的事情：

arr.map((el) => <img alt='' src={el.url} />);
于 2020-06-11T21:05:37.517 回答
0 

import React from 'react';
import Carousel from 'nuka-carousel';

export default function App() {
  const images = [
    {
      id: 4,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 4,
        record: {
          id: 4,
          c_dzp64j57b0pm6b8clmddapump: 'test4',
          created_at: '2020-06-11T18:16:36.443Z',
          updated_at: '2020-06-11T18:16:36.443Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url: 'https://via.placeholder.com/400/ffffff/c0392b/&text=slide2',
            size: 13473,
            width: 300,
            height: 300,
            filename: 'file.gif',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 4,
          },
        },
      },
    },
    {
      id: 3,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 3,
        record: {
          id: 3,
          c_dzp64j57b0pm6b8clmddapump: 'test1',
          created_at: '2020-06-11T16:29:14.713Z',
          updated_at: '2020-06-11T18:15:24.949Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w',
            size: 5557,
            width: 275,
            height: 183,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 3,
          },
        },
      },
    },
    {
      id: 2,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 2,
        record: {
          id: 2,
          c_dzp64j57b0pm6b8clmddapump: 'test2',
          created_at: '2020-06-11T16:29:04.801Z',
          updated_at: '2020-06-11T18:15:07.995Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              '75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg',
            size: 7595,
            width: 284,
            height: 177,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 2,
          },
        },
      },
    },
    {
      id: 1,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 1,
        record: {
          id: 1,
          c_dzp64j57b0pm6b8clmddapump: 'test3',
          created_at: '2020-06-11T16:28:59.989Z',
          updated_at: '2020-06-11T18:15:15.956Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg',
            size: 5503,
            width: 168,
            height: 300,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 1,
          },
        },
      },
    },
  ];

  const slides = images.map((el, index) => (
    <img
      src={el._meta.record.c_55pk7oxu728xufdeh6st6fplh.url}
      alt={`Slide ${index + 1}`}
    />
  ));

  return (
    <div style={{width: '50%', margin: 'auto'}}>
      <Carousel>{slides}</Carousel>
    </div>
  );
}
于 2020-06-12T05:29:52.170 回答