リアクションノーリューデクスは反応ルータ経由でアプリケーションを渡すことができません

Question

リムックスですがリムックスパッケージなしのリアクションノーリダックスを試しています。私はルータの外にあるnavbarの中の小道具にアクセスできますが、私のルータの内部のコンポーネントの内部からappStateにアクセスすることはできません。

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それはそれでerroringされたものは未定義

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> 
    ); 
    } 

} 

私は前にそれを行っているので、これは動作するはずの特性試験を読み取ることができないと言うと、これは私が最後の時間をしたまったく同じことです。私が間違っていた

Answer 1

私の悪い唯一のことは、私は= {}

（）} />

をレンダリングしていない= {}コンポーネントを置くということでした