ReactJS-灯箱组件问题

时间:2019-02-15 08:43:15

标签: reactjs

我安装了react-lightbox-component依赖项,但未显示最大化的缩放图像。有人知道我是否踩错了什么吗?

这是组件官方页面 https://www.npmjs.com/package/react-lightbox-component

我运行了yarn add react-lightbox-component,并通过导入react-component来制作了这个组件。

import React, { Component } from 'react'
import Modal from 'react-responsive-modal';
import Lightbox from 'react-lightbox-component';

const LightBoxTest = () => (

  <div>
   <Lightbox images={ [
      {
        src: 'https://upload.wikimedia.org/wikipedia/commons/8/89/Ropy_pahoehoe.jpg',
        title: 'Ropy pahoehoe',
        description: 'By Tari Noelani Mattox. Licensed under Public Domain via Commons'
      },
      {
        src: 'https://upload.wikimedia.org/wikipedia/commons/7/73/Pyroclastic_flows_at_Mayon_Volcano.jpg',
        title: 'Pyroclastic flows at Mayon Volcano',
        description: 'By C.G. Newhall. Licensed under Public Domain via Commons'
      },
      {
        src: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/Okataina.jpg',
        title: 'Okataina',
        description: 'By Richard Waitt. Licensed under Public Domain via Commons'
      }
    ] }/>
  </div>
);


export default LightBoxTest

1 个答案:

答案 0 :(得分:1)

您还必须包括react-lighthouse-component的CSS。

import "react-lightbox-component/build/css/index.css";