変数として宣言された反応コンポーネントの呼び出し関数

Question

このコンポーネントが変数で指定された場合、Reactコンポーネントの関数を呼び出す方法は？私は、を持っています。これは、クラスをChildコンポーネントに渡しています。この子は、Testで何かを変更したいと考えています。

export class Parent extends React.Component { 
    render() { 
     let test = (<Test />); 
     return (<Child tester={test} />); 
    } 
} 

export class Child extends React.Component { 
    render() { 
     this.props.tester.setText("qwerty"); // how to invoke setText, setState or something like that? 
     return ({this.props.tester}); 
    } 
} 

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

     this.state = { 
      text: this.props.text || "" 
     }; 
    } 

    setText(text) { 
     this.setState({ text: text }); 
    } 

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

Answer 1

反応成分のライフサイクルについて考えるべきだと思います。
以下のコードを試してみてください（ログを追加したばかりです）、ログを慎重に観察してください。

export class Parent extends React.Component { 
    render() { 
     let test = (<Test />); 
     return (<Child tester={test} />); 
    } 
} 

export class Child extends React.Component { 
    render() { 
     console.log("Child render"); // <= logging added! 
     // this.props.tester.setText("qwerty"); 
     // What kind of object is 'this.props.tester(= <Test />)' here??? 
     return ({this.props.tester}); 
    } 
} 

export class Test extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log("Test constructor"); // <= logging added! 
     this.state = { 
      text: this.props.text || "" 
     }; 
    } 

    setText(text) { 
     // this.setState({ text: text }); 
     // this is another problem. We cannot call setState before mounted. 
     this.state.text= text; 
    } 

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

もしそうなら、2つの重要な事実が表示されます。

1. 'setText'を呼び出すと、 'Test'コンポーネントがまだインスタンス化されていません。
   インスタンス化されていないオブジェクトのメソッドをどのように呼び出すことができますか？できません！
2. これは 'this.props.tester'が 'Test'コンポーネントのインスタンスではないことを意味します。

実際にコードを実行したい場合は、このようにChild.renderを変更してください。

render() { 
    var test = new Test({props:{}}); 
    // or even this can work, but I don't know this is right thing 
    // var test = new this.props.tester.type({props:{}}); 
    test.setText("qwerty"); 
    return test.render(); 
} 

しかし、これは良い方法ではないと思います。

別の観点から、1アイデアのように、

render() { 
    // Here, this.props.tester == <Test /> 
    this.props.tester.props.text = "qwerty"; 
    return (this.props.tester); 
} 

を思い付くかもしれませんが、「this.props.tester」が読み取り専用であるため、子供のためのプロパティを、もちろんそれは、不可能です。