小道具として渡された関数に値を渡そうとしています

Question

次のコードがあります。 setText関数をMyClickerクラスに1回渡すと正常に動作します。したがって、以下のコードでは、「Second Text」というテキストが正しく表示されています。

しかし、私はまた、孫のクラスにsetText関数を渡したいと思います。以下のテキスト「3rd Text」は決して表示されません。

ボタンは上手く表示されますが、クリックすると何も表示されません。コンソールにエラーメッセージが表示されず、setText（）関数が呼び出されません。

は私がもともと持っていた：代わりに

<Voo setText={() => this.setText} /> 

の

<Voo setText={this.setText.bind(this)} /> 

が、次のエラーになった：エラーの原因を見た後

Warning: setState(...): Cannot update during an existing state transition

を、私が試しました上記のように矢印の関数を呼び出しますが、エラーはなく、setText関数は呼び出されません。

プークラス：：

import MyClicker from './MyClicker' 
import Voo from './Voo' 

class Poo extends React.Component { 

    constructor() { 
     super(); 

     this.state = { 
      text: "Intro Text", 
     }; 

    } 

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

    render(){ 
     return (
      <div> 
       <h2>{this.state.text}</h2> 
       <MyClicker handleClick={this.setText.bind(this, "Second Text")} text="Click for 2nd Text" /> 

       <Voo setText={() => this.setText} /> 
     ) 
    } 

} 

VOOクラス：

import MyClicker from './MyClicker' 
class Voo extends React.Component { 

    render(){ 
     <MyClicker handleClick={this.props.setText("Third Text")} text="Click for 3rd Text" /> 
    } 

} 

MyClickerクラス：

class MyClicker extends React.Component { 

    handleClick(){ 
     this.props.handleClick(); 
    } 


    render(){ 
     return (
      <div onClick={this.handleClick.bind(this)}>{this.props.text}</div> 
      ) 

    } 

} 

私は何をすることができます。ここ

は、私のコードの簡易版でありますこの問題を解決するレム？

Answer 1

Vooクラスは​​小道具に小さな構文エラーがあります。

以下のようになります。

class Voo extends React.Component { 
    render(){ 
     <MyClicker handleClick={() => this.props.setText("Third Text")} text="Click for 3rd Text" /> 
    } 
} 

このように使用すると、機能が実行されるようになりました。ちょうど小道具として渡されるのではなく実行されます。括弧は関数を実行します。

Answer 2

このように関数をバインドすることができます。そして、setTextを以下のように渡してください。そして、これを渡し、必要なものを "自動的に"渡します。

()を使用すると、setStateが実行され、コンポーネントが再レンダリングされ、状態が再び実行されます。エンドレスループが作成されました。

setText = (text) => { 
    this.setState({ 
     text: text 
    }) 
} 

<Voo setText={this.setText} />