Question

我想做一个反应应用程序从外部文件运行这个组件，我没有在我的应用程序中使用任何捆绑包，如webpack等...还有

阵营/ app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BounceCircle from './canvas';

class App extends Component {

  render() {
    return (
      <div className="App">
        <Header/>
        <Content/>
        <Footer/>
        <BounceCircle/>
      </div>
    );
  }
}

class Header extends Component {
  render() {
    return (
      <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello World</h1>
          <h4>hello to egypt</h4>
          <h3>Welcome to React</h3>
          <h4>hi</h4>
        </div>

    );
  }
}

class Content extends Component {
  render() {
    return (

            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
              </p>

    );
  }
}

class Footer extends Component {
  render() {
    return (    
          <h3>this the Footer</h3>

    );
  }
}






export default App;

这里是组件代码，我想让它导入并在反应应用程序中工作，基本上是一个html5画布我尝试让它在反应应用程序中运行

canvas.js

class BounceCircle extends Component {
  render() {
    return (
            //this var = canvas is to call the canvas tag from html file using querySelector
             canvas=document.querySelector('canvas');
            //this makes the width of the canvas the full width the screen
            canvas.width = window.innerWidth;
            //this makes the height of the canvas the full height the screen
            canvas.height=window.innerHeight;
            // this var = c is to call var canvas to start to work on it 
            var c=canvas.getContext("2d");


            var mouse = {
                x:undefined,
                y:undefined
            }

            var maxRadius = 40;
            var colorArray=[
                '#FF595E',
                '#33032F',
                '#313E50',
                '#0E7C7B',
                '#87BCDE',
            ];
            window.addEventListener('mousemove',
                function(event){
                    mouse.x=event.x;
                    mouse.y=event.y;
            })

            window.addEventListener('resize',function()
            {
                //this makes the width of the canvas the full width the screen
                canvas.width = window.innerWidth;
            //this makes the height of the canvas the full height the screen
                canvas.height=window.innerHeight;

                init(); 
            })
            function Circle(x,y,dx,dy,radius){
                this.x = x;
                this.y = y;
                this.dx= dx;
                this.dy= dy;
                this.radius=radius;
                this.minRadius=radius;
                this.color=colorArray[Math.floor(Math.random()*colorArray.length)];
                this.draw = function()
                {

                    c.beginPath();
                    c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false);
                    c.fillStyle=this.color;
                    c.strokeStyle=this.color;
                    c.fill();
                }
                this.update = function(){
                    if (this.x + this.radius> innerWidth || this.x-this.radius < 0 ) {
                this.dx = -this.dx ;
            }

            if (this.y + this.radius> innerHeight || this.y-this.radius < 0 ) {
                this.dy = -this.dy ;
            }
                this.x += this.dx;
                this.y += this.dy;

                //interactivity
                if (mouse.x - this.x <50 && mouse.x-this.x>-50 && mouse.y - this.y <50 && mouse.y-this.y>-50 ) {
                    if (this.radius<maxRadius) {
                        this.radius+= 1;
                    }

                } else if (this.radius>this.minRadius) {
                    this.radius-= 1;
                }
                this.draw();
                }
            }


            var circleArray=[];
                for (var i = 0; i < 500; i++)
             {
                var radius=Math.random() * 3 + 1;
                var x =Math.random()*innerWidth;
                var y = Math.random()*innerHeight;
                var dx= (Math.random() - 0.5)*16;
                var dy= (Math.random() - 0.5)*16;


                circleArray.push(new Circle(x,y,dx,dy,radius));

            }

            function init()
            {
             circleArray=[];

            }


            function animate(){
                requestAnimationFrame(animate);
                c.clearRect(0,0,innerWidth,innerHeight);

            for (var i = 0; i < circleArray.length; i++) 
            {
                circleArray[i].update();
            }

            }

            animate();



    );
  }
}

export default BounceCircle;

两个文件都在同一个文件夹中

Answer 1

在您的app.js中，您可以说：

import BounceCircle from './canvas'

然后您可以像使用其他任何组件<BounceCircle />

一样使用它

从外部文件导入就像从node_modules导入一样。只需指向正确的目录即可。

在文件中，您可以看到default export。您可以在default exports中根据需要为app.js命名。因此所有这些都会起作用，并会返回相同的东西（BounceCircle）：

import Cheese from './canvas';
import Canvas from './canvas';
import MyThingy from './canvas';

其他出口如：

`myCode.js`

export class Pies extends Component { /* code */ }

class Cake extends Component { /* code */ }

default export Cake;

现在我们有Pies的默认导出，但我们还有export class（不是默认值）

可以使用curlies导入非默认值：

import { Pies } from './myCode'

curlies中的值应始终与导入文件中的名称匹配。

但这仍然是可能的，这导致同样的事情：

import Cake, { Pies } from './myCode'
import ICanUseEverythingHere, { Pies } from './myCode'

如何使reactjs从外部文件调用Component

1 个答案: