web-dev-qa-db-ja.com

React.jsの別のクラスコンポーネントからメソッドを呼び出す方法

だから私はコンポーネントをクラス化する必要があります：
Class1：クリックボタンがあります
Class2：私のAPIを呼び出すメソッドがあります

基本的に、あるクラス内の状態を別のクラスから設定および編集するメソッドを呼び出すことです。しかし、私は失敗し続けます。

例：

Class1.js
export class Class1 extends Component {
   render() {
      return (
         <div onClick={must call Class2Method}></div>
      )
   }
}

Class2.js
export class Class2 extends Component {
   Class2Method(){
      Here I call my API, I set & call states, ...
   }
   render {
      return (
         <Class1 />
         Here I return my API content
      )    
   }   
}

私が試したこと：

  1. 私は自分のメソッドを使用して、App.js（class2とclass1の両方の親）で状態を呼び出して設定しようとしました。しかし、それから私のClass2.jsコンソールは私の状態を見つけることができないと言います。
  2. 私も試しました：クラス2で<Class1 method = {this.Class2Method} />、クラス1で<div onClick = {this.props.method}>。
reactjsclassmethodscomponents
10
Cédric Bloem

どうぞ

Class1.js

       export class Class1 extends Component {
             render() {
                return (
                    <div onClick={this.props.callApi}></div>
                )
            }
       }

Class2.js

  1. コンストラクターでcallApi関数をバインドするか、それを矢印関数に変更します。

  2. CallApiメソッドをプロップとしてclass1コンポーネントに渡し、this.props.callApiとして上記のコンポーネントにアクセスして、divのonClickに渡します。

     export class Class2 extends Component {
       callApi = () => {
           Here I call my API, I set & call states, ...
        }
       render {
           return (
              <Class1 callApi={this.callApi} />
                   Here I return my API content
            )    
       }   
   }
3
Hemadri Dasari

まず、 "Class1"のように状態を使用せず、小道具のみを使用する場合は、ステートフルコンポーネントの代わりに Stateless Functional Components を使用することを検討してください。

さて、あなたが必要なことをするために..このように、あなたのメソッドを小道具として渡すだけです：

export class Class1 extends Component {
   render() {
      return (
         <div onClick={this.props.getData()}>Click to Call API</div>
      );
   }
}

export class Class2 extends Component {
   state = {
    data: null,
   };
   
   callApi = () => {
      // Get API data
      const data = {
        hello: 'world',
      };
      
      this.setState({ data });
   }
   
   render {
      return (
         <Class1 getData={this.callApi} />
         {JSON.stringify(this.state.data)}
      )    
   }   
}
0
Mateus Silva

React.jsで別のクラスコンポーネントからメソッドを呼び出す方法

小道具の使用

「レンダープロップ」とは、React値が関数であるプロップを使用するコンポーネント）間でコードを共有するための手法のことです- reactjs.org

例

app.js

import Button from '../../pathtoButton';
export class App extents Component {
    constructor(props){
        super(props)
        this.state = {
             name:'John'
        }
    }
    sayHello(){
        const { name } = this.message;
        alert(`Hello ${name}`}
    }
    render(){
        return (
             <div>
                 <Button
                     value="click me"
                     whenClicked={this.sayHello}
             </div>
        );
    }
}

button.js

export class Button extents Component {
    constructor(props){
        super(props)
        this.state = {
             style:{background:'red', color:'white'},
        }
    }
    render(){
        const { style } = this.state;
        const { whenClicked, value} = this.props;
        return (
             <div>
                 <button style={style} onClick={whenClicked}>{value}</button>
             </div>
        );
    }
}

説明

app.jsでは、コンポーネント<Button/>をインポートし、propsを使用して、app.js "sayHello"からwhenClicked。 button.jsでは、this.props.whenClickedを参照してonClickプロパティに渡しました。

sayHelloは2つのコンポーネント間で共有されています。これは、メソッドをプロップとして<Button/>コンポーネントに渡したためです。

0
Luke Walker