美好的一天!我试图在reactjs中使用视差(materializecss),但图片没有出来。
我已经使用npm安装了materializecss,

这是我的代码:

import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';

    const About = () => {
    return (
            <div className="paralax">
                <div className="parallax-container">
                    <div className="parallax"><img src={Pic1} alt="Building"/></div>
                </div>
                <div className="class section white">
                    <div className="row container">
                        <h2 className="header">Parallax</h2>
                        <p className="grey-text text-darken-3 ligthen-3">
                        Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
                        </p>
                    </div>
                </div>
                <div className="parallax-container">
                    <div className="parallax"><img src={Pic2} alt="Building"/></div>
                </div>
            </div>


        )
    }
    export default About;

最佳答案

使用反应实现。

安装:npm install react-materialize

并像import {Parallax} from 'react-materialize';一样导入视差

因此,您的代码变为:

import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';

class App extends Component {
  render() {
    return (
      <div>
      <Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
      <div className="section white">
        <div className="row container">
          <h2 className="header">Parallax</h2>
          <p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
        </div>
      </div>
      <Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
    </div>
    );
  }
}

export default App;


我使用了图像超链接。但是您也可以用静态图像替换它们。

另外,在jquery中将materialise.min.js导入为index.html

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


供参考:https://react-materialize.github.io/#/

和平

09-11 17:37