web-dev-qa-db-ja.com

ReactJS-別のコンポーネントから1つのコンポーネントメソッドを呼び出す

2つのコンポーネントがあります。 2番目のコンポーネントから最初のコンポーネントのメソッドを呼び出したい。どうすればいいですか？

これが私のコードです。

最初のコンポーネント

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

2番目のコンポーネント

class PopupOver extends React.Component{

    constructor(){
        super();
        // here i need to call Header class function check click....
        // How to call Header.checkClick() from this class
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;
reactjsclassmethodscall
28
Kushal Jain

このようなことができます

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

静力学の使用

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === 'bar';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod('bar');  // true
18
Mohit Verma

実際、Reactは親から子メソッドを呼び出すのには適していません。 Cycle.js などの一部のフレームワークでは、親と子の両方からデータに簡単にアクセスし、それに反応できます。

また、実際にそれを必要としない可能性が高いです。既存のコンポーネントに呼び出すことを検討してください。これは、はるかに独立したソリューションです。しかし、それでも必要な場合があります。その場合、選択肢がほとんどありません。

  • 子である場合、メソッドを渡します（最も簡単なメソッドであり、渡されたプロパティの1つです）
  • イベントライブラリを追加します。 Reactエコシステムフラックスアプローチは、 Redux ライブラリで最もよく知られています。すべてのイベントを別々の状態とアクションに分離し、それらをコンポーネントからディスパッチします
  • 親コンポーネントで子の関数を使用する必要がある場合は、3番目のコンポーネントでラップし、拡張された小道具で親を複製できます。

UPD：状態を含まない機能（OOPの静的関数など）を共有する必要がある場合は、その必要はありません。コンポーネント内に格納します。個別に宣言し、必要なときに呼び出します。

let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}
4
Bloomca