调整React js中lottie动画的屏幕大小

Question

我正在一个网站上工作，在它的登陆页面上有一个lottie动画，我如何调整lottie组件的大小，使显示在移动设备上设置为无

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
export default function App() {
const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div id="lottie">
<Lottie
options={defaultOptions}
height={800}
width={1000}
style={{
top: "30%",
right: "10%",
zIndex: -1,
overflow: "hidden",
position: "fixed",
}}
/>
</div>
);
}

是home组件。

import Lottie from "../Components/Lottie";
import React from "react";
function Landing () => {
let width = window.innerWidth;
if (width > 600px) {
console.log(width);
} else {
document.getElementById("lottie").style.display = "none";
}
<Lottie className="col-lg-8 col-sm-12 lottie d-none" />
}
export default Landing;

我也尝试使用外部CSS

@media screen and (max-width: 600px) {
.lottie {
display: none !important;
}
}

Answer 1

所以，有了react，你可以有条件地呈现组件，而不必使用本地dom操作，如document.getElementById。

首先，让我们尝试简化获取窗口大小的方式:
创建某种可以在其他地方重用的导出函数
windowDimensions.js

export function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}

然后导入到你的App

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
import {getWindowDimensions} from './windowDimensions.js';
export default function App() {
const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div id="lottie">
// Here we use our conditional rendering
{ getWindowDimensions().width > 600 &&
<Lottie
options={defaultOptions}
height={800}
width={1000}
style={{
top: "30%",
right: "10%",
zIndex: -1,
overflow: "hidden",
position: "fixed",
}}
/>
</div>
}
);
}

此代码只会在窗口宽度大于600时呈现lottie组件。当然，您仍然可以使用css条件渲染，您的代码似乎可以。也许在您的媒体查询中尝试使用visibility: hidden。小心，你在react代码中定义了一个idlottie，它应该在css中被用作#lottie。你目前使用它作为.lottie在你的css指的是一个类。这可能就是你的css方法不起作用的原因。
最后，我还要看一下您添加到lottie组件中的类引用了什么。

希望这能给你一个开始调查的地方。
这里有一些关于条件渲染的文档。

Answer 2

你的css不会影响你的lottie，因为.lottie是一个类，但你的lottie被定义为一个id，所以使用#lottie代替:

@media screen and (max-width: 600px) {
#lottie {
display: none !important;
}
}

Answer 3

在<Lottie />中删除d-none并添加d-lg-block d-md-block d-sm-none d-none，它将达到目的