2017-12-08 16 views
0

Ich versuche, React-No-Redux zu verwenden, das Redux aber ohne das Redux-Paket ist. Ich werde meinen Code unten setzen, weil das Problem im Haben ist, dass ich auf die Stützen in meiner navbar zugreifen kann, die außerhalb des Fräsers ist, aber ich nicht auf den appState von innerhalb irgendeiner der Komponenten innerhalb meines Fräsers zurückgreifen kann.React-No-Redux kann Appstate durch React-Router nicht passieren

AppState.js

import React, { Component } from 'react'; 

export default class AppState extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     test: 'hello im a test string' 
    }; 
    this.setAppState = this.setAppState.bind(this); 
} 

setAppState(newState, callback) { 
    this.setState(newState, callback); 
} 

render() { 
    return (
    <div className="AppState"> 
    {React.Children.map(this.props.children, child => { 
     return React.cloneElement(child, { 
     appState: this.state, 
     setAppState: this.setAppState 
     }); 
    })} 
    </div> 
); 
} 
} 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 
import registerServiceWorker from './registerServiceWorker'; 

import AppState from './AppState'; 
import StateConstants from './constants/stateConstants'; 
import Error404 from './views/errorPages/Error404'; 

ReactDOM.render(
    <Router> 
    <AppState> 
     <App 
     setAppState={this.setAppState} 
     appState={this.appState} 
     /> 
    </AppState> 
    </Router> 
    , 
    document.getElementById('root') 
); 
registerServiceWorker(); 

App.js

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

import Error404 from './views/errorPages/Error404'; 
import Home from './views/pages/Home'; 
import Navbar from './partials/Navbar'; 

import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Navbar 
      setAppState={this.props.setAppState} 
      appState={this.props.appState} 
     /> 
     <Switch> 
      <Route exact path='/' component={Home} appState={this.props.appState} setAppState={this.props.setAppState} /> 
      <Route component={Error404} /> 
     </Switch> 
     </div> 
    ); 
    } 
} 

export default App; 

Navbar.js

import React, { Component } from 'react'; 

export default class Navbar extends Component { 
    constructor(props){ 
    super(props); 
    console.log(this.props); 
    } 

    render(){ 
    return (
     <div className="navbar"><center><h1>Hello Navbar</h1></center</div> 
    ); 
} 
} 

Home.js das man es auf es erroring sagt nicht Eigenschaftstest undefinierter

import React, { Component } from 'react'; 

export default class Home extends Component{ 
    constructor(props){ 
    super(props); 
    console.log(this.props); 
    } 

    render(){ 
    return (
     <div> 
     {this.props.appState.test} 
     </div> 
    ); 
    } 

} 

Dies sollte lesen kann arbeiten, wie ich es vorher getan haben, und das ist genau das gleiche, was ich das letzte Mal tat.

Antwort

0

Mein schlechtes das einzige, was ich falsch gemacht habe war, dass ich Komponente gesetzt = {} nicht = render {}

()} />

Verwandte Themen