Question

刚开始将React Routes添加到React / firebase应用程序。我有这段代码来读取数据，

const fb = firebase  
.initializeApp(config)
.database()
.ref();

fb.on('value', snapshot => {  
  const store = snapshot.val();
  ReactDOM.render(
       <App {...store} />
    ,
    document.getElementById('root')
  );
});

这项工作正常，可以对应用程序进行实时更新。然后我开始玩Router，

ReactDOM.render(
   <Router>
    <Route path="/" component={App {...store}} />
  </Router>
   ,
  document.getElementById('root')
);

但{... store}给出了一个错误，意外的令牌。我应该将Firebase代码从树下移到App组件中还是有不同的方式？

Answer 1

呃component=没有采用ReactDOM.render()

那样的东西

正如你现在所说：商店将是未定义的...所以设置：

let store = {} // at the top

您的实际组件/类定义在哪里？你也不应该根据Firebase出现的时间创建渲染，你应该首先渲染，然后当firebase出现时你可以更新状态。

所以在这可行之前需要修复很多东西。

这是我的index.js：

还注意到store是configureStore的结果（我假设你想要使用Redux，因为你有一个商店）...

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './root/containers/Root'
import './index.css'
import configureStore from './root/store'
import { syncHistoryWithStore } from 'react-router-redux'
import { browserHistory } from 'react-router'

const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)


render(
  <Root store={store} history={history} />,
  document.getElementById('root')
);

我的商店：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducer from '../reducers'
import { database, initializeApp } from 'firebase'
import { firebaseConfig } from '../constants'
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/react')
export const dateRef = rootRef.child('/date')

export default function configureStore(preloadedState){
  const store = createStore(
    reducer,
    preloadedState,
    applyMiddleware(thunkMiddleware, createLogger())
  )
  return store
}

我的根：

import React, { Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import routes from './routes'
import { Router, } from 'react-router'

class Root extends Component {
  render() {
    const { store, history } = this.props
    return (
      <Provider store={store}>
        <Router history={history} routes={routes} />
      </Provider>
    )
  }
}

Root.propTypes = {
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
}

最简单的版本：

import React, { Component } from 'react'
import { firebaseConfig } from '../constants' //this is a must otherwise you have multiple versions of firebase running around...
initializeApp(firebaseConfig)
export const rootRef = database().ref().child('/root')

class App extends Component {
componentDidMount(){
    initializeApp(firebaseConfig)
    this.state = {store: {}}

    rootRef.on('value', snapshot => {
       this.setState({store: snapshot.val()});
    }

}
render(){
let { store } = this.state
let childrenWithProps = React.Children
.map(this.props.children, function(child) {
        return React.cloneElement(child, { store: store });
});


return <div>
{JSON.stringify(store)}
{childrenWithProps}
</div>
}

}
const Routes = (<Route component={App}><Route component={Comp1} path='/earg'/><Route component={Comp2} path='/earg'/></Route>)

render(Routes, document.getElementById('root'))

这是很多代码，你还需要更多的代码......我推荐一个教程......

Answer 2

最后，为了快速解决方案，我使用匿名函数来包装组件，

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

将路由添加到React / Firebase应用程序

2 个答案: