React-router: 无法传递上下文

Question

我正在使用 child 上下文技术将上下文传递给应用程序的 children。

Child上下文成功传递给Header组件，但在遭遇组件。解决这个问题的任何想法。谢谢

申请：

 export default class Application extends React.Component {
 constructor(props, context){
  super(props);
  this._onDataReceived=this._onDataReceived.bind(this);
}

componentDidMount() {
 PersonalStore._onDataReceived(this._onDataReceived);
}

componentWillUnmount() {
 PersonalStore._offDataReceived(this._onDataReceived);
}

getChildContext() {
 return { name:"Moussawi7" };
}
renderRouter(){
 ReactDOM.render((
  <Router>
  <Route path="/" component={Encounter} />
  <Route path="inbox">
  <IndexRoute component={Inbox} onEnter={()=>this.refreshScroller()}/>
  <Route path=":userID" component={Conversation} />
  </Route>
  <Route path="*" component={NotFound} />
  </Router>
  ),document.getElementById('content'));
}

render() {
  return (
    <div className="container">
    <Header/>
    <div id="content"></div>
    </div>
    );
}
_onDataReceived() {
  this.renderRouter();
}
}
Application.childContextTypes={
 name: React.PropTypes.string.isRequired
}

Header:

export default class Header extends React.Component {
  constructor(props,context) {
    super(props,context);
    console.log(context);// Object{name:"Moussawi7"}
  }
}
Header.contextTypes= {
        name: React.PropTypes.string.isRequired
    }

遭遇：

export default class Encounter extends React.Component {
  constructor(props,context) {
    super(props,context);
    console.log(context);//  Object {name:undefined}
  }
}
Encounter.contextTypes= {
        name: React.PropTypes.string.isRequired
    }

Answer 1

正如 Morhause 所说，这可能是您的问题。建议的方法是路由器是基本元素，应用程序包装其他路由。在这里，我将 Provider 包裹在路由器周围，以便所有内容都可以访问 Provider 的上下文：

// Provider.js Your app context provider

import React, { Component, PropTypes, Children } from 'react'

class Provider extends Component {

    static childContextTypes = {
        name: PropTypes.string
    }

    getChildContext() {
        return {
            name: 'Moussawi7'
        };
    }

    render() {
        let { children } = this.props;
        return Children.only(children);
    }
}

// Router.js Your Provider+Router is the first thing rendered on the root, not Application, which is the base route

ReactDOM.render(
    <Provider>
        <Router>
            <Route path='/' component={Application}>
                <IndexRoute component={Encounter} />
                <Route path='users' component={Users} />
                <Route path="inbox">
                    <IndexRoute component={Inbox} onEnter={()=>this.refreshScroller()}/>
                    <Route path=":userID" component={Conversation} />
                </Route>
                <Route path="*" component={NotFound} />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('content')
);

// Your Application renders the child routes

class Application extends Component {

    render() {
        return (
            <div>
                <header>
                    <nav>
                        <ul>
                            <li><Link to='/'>Home</Link></li>
                            <li><Link to='/users'>Users</Link></li>
                        </ul>
                    </nav>
                </header>
                <div className='route-content'>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

请注意，我在那些需要 babel 阶段 0 的示例中使用了 es7 的 static，但您可以将它们放在 class.

之外

React-router: 无法传递上下文

React-router: unable to pass context

reactjs

react-router