Question

我正试图将React Web应用程序重构为更具可读性。但是，我遇到一个问题，似乎子组件似乎没有引发“无应用程序”错误。我认为问题在于Firebase凭证

线索： 1.子组件在单独的文件中似乎可以识别变量“ firebase”，这意味着这些文件确实可以识别父级中声明的firebase变量。 2.尽管在父文件中初始化了应用程序，但凭据似乎并未传递给子文件。

我可以将配置数据作为道具传递给每个组件，然后在每个组件内重新初始化应用程序，但是.....看起来不太优雅或不合适。我还试图创建一个单独的初始化文件，并在每个子组件中调用它，但这对我没有用，我不禁认为必须有一种更优雅的方法来实现此目的。

错误也没有完全指定发生的位置，这也无济于事。

代码：

from math import sin, cos

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.scrollview import ScrollView
from kivy.uix.widget import Widget
from kivy.uix.relativelayout import RelativeLayout

from kivy.garden.graph import Graph, MeshLinePlot


class Plot(RelativeLayout):
    def __init__(self, **kwargs):
        super(Plot, self).__init__(**kwargs)
        self.graph = Graph(xlabel="x", ylabel="y", x_ticks_minor=5, x_ticks_major=25, y_ticks_major=1,
                           y_grid_label=True, x_grid_label=True, x_grid=True, y_grid=True,
                           xmin=-0, xmax=100, ymin=-1, ymax=1, draw_border=False)
        # graph.size = (1200, 400)
        # self.graph.pos = self.center

        self.plot = MeshLinePlot(color=[1, 1, 1, 1])
        self.plot.points = [(x, sin(x / 10.)) for x in range(0, 101)]
        self.plot2 = MeshLinePlot(color=[1, 0, 0, 1])
        self.plot2.points = [(x, cos(x / 10.)) for x in range(0, 101)]
        self.add_widget(self.graph)

        self.graph.add_plot(self.plot)
        self.graph.add_plot(self.plot2)


class GraphLayoutApp(App):

    def build(self):
        scroll_view = ScrollView()
        grid_layout = GridLayout(cols=1, padding=20, spacing=20, size_hint_y=None)
        grid_layout.bind(minimum_size=grid_layout.setter('size'))
        graph = Plot(size_hint_y=None, height=500)
        graph2 = Plot(size_hint_y=None, height=500)
        label = Label(text="Hello World!", size_hint_y=None)
        label2 = Label(text="Hello World!", size_hint_y=None)
        grid_layout.add_widget(label)
        grid_layout.add_widget(graph)
        grid_layout.add_widget(label2)
        grid_layout.add_widget(graph2)
        scroll_view.add_widget(grid_layout)

        # return grid_layout
        return scroll_view


if __name__ == '__main__':
    GraphLayoutApp().run()

///我尝试将以下代码放入其自己的文件中， //通过导入'../fileName'引用它不起作用

/* index.js, the main file */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style.css';

/*==============
Initialize firebase 
===============*/

子代码：

/ * ChildComponent.js * /

import firebase from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/database';
  import 'firebase/firestore';
  import 'firebase/messaging';
  import 'firebase/functions';
  import 'firebase/storage';

  var config = {
      apiKey: "<API key hidden>",
      authDomain: "<App name>.firebaseapp.com",
      databaseURL: "https://<app name>.firebaseio.com",
      projectId: "<project>",
      storageBucket: "<project>.appspot.com",
      messagingSenderId: "<my sender id>"
    };

firebase.initializeApp(config);



/*============
Components
=============*/


//Content-addition-to-database components
import ChildComponent from './components/ChildComponent';


/*===========
*
* Begin App
*
============*/

export default class App extends React.Component{

... some code ...


render(){
return(
<div>
   <ChildComponent />
</div>
);

收到错误：

import React from 'react'

export default ChildComponent extends React.Component{
  //tried importing the aforementioned file '../
}

将App重构为单独的文件时，出现Firebase + React“ No App”错误

0 个答案: