具有reactjs的materializecss（如何在reactjs中导入javascript / Jquery）

Question

美好的一天！ 我试图在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;

Answer 1

使用react-materialize 。

安装： npm install react-materialize

并像import {Parallax} from '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;

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

另外，在index.html导入jquery befor materialise.min.js

  <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/#/

和平

Answer 2

要使用Materialize CSS的Javascript组件，我们需要获取将要使用的特定元素的reference 。

我们使用ref是因为我们触发命令式动画。

何时使用参考

• 触发命令式动画。
• 与第三方DOM库集成。

由于我们使用的是MaterializeCSS，这是第三方CSS框架，因此为了使用其中的动画，我们使用ref 。

什么时候在React中使用refs

CodeSandbox-视差演示

您可以从此存储库检查React中的其他Materialise CSS组件-GermaVinsmoke-Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";

class Parallax extends Component {
  componentDidMount() {
    M.Parallax.init(this.Parallax1);
    M.Parallax.init(this.Parallax2);
  }

  render() {
    return (
      <>
        <div className="parallax-container">
          <div
            ref={Parallax => {
              this.Parallax1 = Parallax;
            }}
            className="parallax"
          >
            <img src={Image2} />
          </div>
        </div>
        <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>
        <div
          ref={Parallax => {
            this.Parallax2 = Parallax;
          }}
          className="parallax-container"
        >
          <div className="parallax">
            <img src={Image1} />
          </div>
        </div>
      </>
    );
  }
}

export default Parallax;