粒子js没有在反应js中应用道具
粒子js没有在反应js中应用道具
提问于 2022-05-16 19:00:55
我正在使用react js作为我的网站项目的背景，它是重叠的滚动条。无论我做什么，我都无法改变粒子js中画布的宽度。
这是我的粒子成分
import React from 'react'
import Particles from 'react-tsparticles'
import styled from 'styled-components';
import { loadFull } from "tsparticles";
const Box = styled.div`
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index: 0;
`
const ParticleComponent = (props) => {
const paramOne = {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": props.theme.text
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": props.theme.text
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 20,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": props.theme.text,
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"outModes": {
"default": "bounce"
},
"bounce": true,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
const paramTwo = {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": props.theme.text
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": props.theme.text
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": true,
"speed": 3,
"size_min": 0.4,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": props.theme.text,
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"outModes": {
"default": "bounce"
},
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
const particlesInit = async (main) => {
await loadFull(main);
};
const particlesLoaded = (container) => {
};
return (
<Box>
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options=
{props.style === "one" ? paramOne : paramTwo } />
</Box>
)
}
export default ParticleComponent;我把这个组件呈现成这样
<ParticleComponent theme={props.theme} />我试过像这样的内联风格
<Box>
<style>
{
`
#tsparticles canvas {
width : ${document.body.clientWidth - 5}px !important;
}
`
}
</style>
<Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded=
{particlesLoaded} options={props.style === "one" ? paramOne : paramTwo } />
</Box>我试过用这种风格的道具
<Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded=
{particlesLoaded} options={props.style === "one" ? paramOne : paramTwo } />我试过像这样的粒子js宽度道具
<Particles width='99%' id="tsparticles" init={particlesInit} loaded={particlesLoaded} options=
{props.style === "one" ? paramOne : paramTwo } />我正在考虑尝试类名方法，但是当它不改变时，使用内联样式，那么类名方法会有什么帮助。没有其他div设置为fixed，这是重叠的滚动条，设置画布位置绝对也没有帮助，因为我希望它保持固定，其余的元素可以滚动。
回答 1
Stack Overflow用户
发布于 2022-10-04 20:18:09
import { useCallback } from "react";
import { loadFull } from "tsparticles";
import Particles from "react-tsparticles";
import { particlesOptionsConfig, } from "./particles-config";
import './styles.scss'
const ParticlesBackground = (props) => {
const { children } = props
const particlesInit = useCallback(async (engine) => {
await loadFull(engine);
}, []);
const canvasPosition = `
width: 100% !important;
height: 100% !important;
position: absolute !important;
zIndex: 0 !important;
top: 0px !important;
left: 0px !important;
backgroundColor: rgb(13; 71; 161);
pointerEvents: none;
`
const particlesLoaded = useCallback(async (container) => {
const element = document.getElementsByClassName("ParticlesCanvasWrapper")[0]
element.setAttribute("style", canvasPosition);
}, []);
return (
<div>
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={particlesOptionsConfig}
canvasClassName="ParticlesCanvasWrapper"
>
{children}
</Particles>
</div>
);
};
export default ParticlesBackground;
组件支柱上的内联样式不起作用。我使用组件生命周期添加内联样式属性，如
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72264334
复制相关文章
相似问题
腾讯云开发者
