带有 React 的 Naker.back

编程问答 2022-05-20

问题描述

Naker.Back Documentations

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

This is the file structure for my home page now

这是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,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: 无法读取未定义的属性 'render'

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

interactivejavascriptreact-lifecycle-hooksreactjsreactjsreactjsreactjs