[英]materializecss with reactjs (how to import javascript/Jquery in reactjs)
Good day! 美好的一天! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
我试图在reactjs中使用视差(materializecss),但图片没有出来。 i already install the materializecss using npm,
我已经使用npm安装了materializecss,
heres my code: 这是我的代码:
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;
Use react-materialize . 使用react-materialize 。
Install: npm install react-materialize
安装:
npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
并像
import {Parallax} from 'react-materialize';
一样import {Parallax} from 'react-materialize';
Hence your code becomes: 因此,您的代码变为:
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;
I have used image hyperlinks. 我使用了图像超链接。 But you can replace them with static images also.
但是您也可以用静态图像替换它们。
Also, import jquery
befor materialise.min.js
in your index.html
另外,在
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>
For Reference : https://react-materialize.github.io/#/ 供参考: https : //react-materialize.github.io/#/
PEACE 和平
To use Javascript components of Materialize CSS, we need to get the reference
of that particular element that we're gonna use. 要使用Materialize CSS的Javascript组件,我们需要获取将要使用的特定元素的
reference
。
We're using ref
because we're triggering imperative animations. 我们使用
ref
是因为我们触发命令式动画。
When to Use Refs 何时使用参考
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref
. 由于我们使用的是MaterializeCSS,这是第三方CSS框架,因此为了使用其中的动画,我们使用
ref
。
When to use refs in React 什么时候在React中使用refs
CodeSandbox - Parallax Demo CodeSandbox-视差演示
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize 您可以从此存储库检查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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.