Ist es möglich, den Kontext festzulegen, nachdem die Komponente in React geladen wurde?

Question

Ich möchte die durchgeführten Prüfungen hinzufügen (sobald die Komponente in CDM eingehängt ist), um userAgent zu erkennen - für die Zwecke der Erkennung von mobilen/flash/touchDevice zum Kontext und nicht zum Zustand. Ist das möglich? Wenn ja, wie würdest du das tun? Ich bekomme gerade undefined, wenn ich versuche, auf den Wert für den Kontext für die isFlashInstalled zuzugreifen. Hier ist Einblick in die Komponente den Kontext setzen:

App.js

export class App extends Component { 
    static childContextTypes = { 
    isFlashInstalled: React.PropTypes.bool 
    }; 

    constructor() { 
    super(); 
    this.state = { 
     isFlashInstalled: false 
    }; 
    } 

    getChildContext() { 
    return { 
     isFlashInstalled: this.state.isFlashInstalled 
    }; 
    } 

    componentDidMount() { 
    const flashVersion = require('../../../client/utils/detectFlash')(); 
    // I know this could be done cleaner, focusing on how for now. 
    if (flashVersion && flashVersion.major !== 0) { 
     this.setFlashInstalled(true); 
    } else { 
     this.setFlashInstalled(false); 
    } 
    } 

    setFlashInstalled(status) { 
    this.setState({isFlashInstalled: status}); 
    } 
} 

Später, wenn sie versuchen aus dem Kontext für den Zugriff auf isFlashInstalled I undefined

ChildComponent.js

export class ChildComponent extends Component { 
    // all the good stuff before render 
    render() { 
    const {isFlashInstalled} = this.context 
    console.log(isFlashInstalled); // undefined 
    } 
} 

Answer 1

hast du richtig eingestellt bekommen up Kontexttypen für Eltern und Kind? Ich habe einen Test, und es funktioniert, die componentDidMount sehen, die den Zustand asynchron gesetzt:

class Parent extends React.Component { 
    state = { 
    color: 'red' 
    } 

    getChildContext() { 
    return { 
     color: this.state.color 
    }; 
    } 

    componentDidMount() { 
    setTimeout(() => this.setState({color: 'blue'}), 2000) 
    } 

    render() { 
    return (
     <div>Test <Button>Click</Button></div> 
    ); 
    } 
} 

Parent.childContextTypes = { 
    color: React.PropTypes.string 
} 

class Button extends React.Component { 
    render() { 
    return (
     <button style={{background: this.context.color}}> 
     {this.props.children} 
     </button> 
    ); 
    } 
} 

Button.contextTypes = { 
    color: React.PropTypes.string 
}; 

http://jsbin.com/cogikibifu/1/edit?js,output