アクセス外部のコンテキストからのコンポーネント関数の反応

Question

Class2の唯一のコンテナであるClass1があります。私はTestコンポーネントをClass1に宣言します。今度はTestをパラメータとしてClass2に渡したいと思います。

Testのコンポーネントのコンテキストには、Class2が入っている場所にアクセスすることはできますか？

export default class Class1 extends React.Component { 
    render() { 
     let test = (<Test />); 

     return (
      <Class2 test={test} /> 
     ); 
    } 
} 

export default class Class2 extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     let { test } = this.props; 

     // how to access Test class context? 
     test.setValue("WHERE IS MY CONTEXT?"); 

     return (
      <div>{ test }</div> 
     ); 
    } 
} 

export default class Test extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      value: "" 
     }; 
    } 

    setValue(val) { 
     this.setState({ 
      value: val 
     }); 
    } 

    render() { 
     return (
      <div>{ this.state.value }</div> 
     ); 
    } 
} 

私が直接test.propsにアクセスしようとすると、私はpropsは読み取り専用されているとすることはできないという反応させ、エラーが出る...私はWeb上で何かを見つけることとtestオブジェクトを検討しようとしたが、私は何も見つかりませんでした代わりに状態のアクセス...

Answer 1

使用の小道具：

let { test } = this.props; 

<div>{ React.cloneElement(test, {value: "Hello World"}) }</div> 

そしてTest中：

<div>{ this.props.value }</div> 

PS：Context means something else in React。

Answer 2

完全な例：あなたが親コンテナの子状態にアクセスする必要がある場合

class Class1 extends React.Component { 
    render() { 
     return (
      <Class2> 
       <Test /> 
      </Class2> 
     ); 
    } 
} 

class Class2 extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       {React.cloneElement(this.props.children, {text: "WHERE IS MY CONTEXT?"})} 
      </div> 
     ); 
    } 
} 

class Test extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

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

JSFiddle