0

Naker.Back 文档

我遇到了一篇使用 Naker.back 制作交互式背景的文章，因此我决定在我计划使用 MERN 堆栈构建的投资组合网站中尝试一下。我打算使用我创建的交互式背景并将其嵌入到我的 React 组件中。

这是我现在主页的文件结构

这是 Background.js 的代码，我根据提供的文档复制并编辑了值，并将作为 JSX 导出到 Home.js

import React, { Component } from 'react';
import styles from './Background.module.css'

const script = document.createElement("script");
script.src = "https://d23jutsnau9x47.cloudfront.net/back/v1.0.9/viewer.js";
script.async = true;
document.body.appendChild(script);

class Background extends Component {

componentDidMount() {
    window.nakerback.render({
        container: document.getElementById('container'),
        particle: {
            direction1: {x: 0,y: 0,z: 0},
            direction2: {x: 0,y: -100,z: -100},
            life: 5,
            power: 0.02,
            texture: "https://res.cloudinary.com/naker-io/image/upload/v1566560053/flare_01.png",
            number: 2000,
            colorStart: [251,251,251,0],
            colorEnd: [4,72,132,0.52],
            sizeStart: 1.15,
            sizeEnd: 2.3
        },
        environment: {
            gradient: 'horizontol',
            sensitivity: 0.8,
            backgroundTop: [40,4,107,1],
            backgroundBottom: [1,18,51,1]
        }
    });
}
    render(){ 
    return <div className={styles.background} id="container"></div>
    };
}

export default Background;

将作为路由组件导出到 App.js 中的 Home.js 代码：

import React from 'react';
import Background from '../components/Background'

const Home = () => {
    return(
        <div>
            <Background/>
            <h1>Home</h1>
        </div>
        )
};

export default Home;

错误消息被抛出：

TypeError：无法读取未定义的属性“渲染”

   9 | class Background extends Component {
  10 | 
  11 |     componentDidMount() {
> 12 |         window.nakerback.render({
  13 |             container: document.getElementById('container'),
  14 |             particle: {
  15 |                 direction1: {x: 0,y: 0,z: 0},
4

0 回答 0