React/ES6 - >他のコンポーネントからReactコンポーネントクラスメソッドを呼び出す方法は？

Question

クラス/コンポーネント内から他の（React）コンポーネントのクラスメソッドを呼び出すことは可能ですか？

例：

// file x.js 
import React, { Component } from 'react' 

class X extends Component { 
    methodY() { 
     console.log('methodY') 
    } 
    render() { 
     return <div /> 
    } 
} 

export default X 



// file z.js 
import React, { Component } from 'react' 

class Z extends Component { 
    render() { 
     return <button onClick={X.methodY} /> 
    } 
} 
export default Z 

Answer 1

それは技術的な観点から可能であるかもしれない - しかし、あなたは本当にがいけません。

イデオロギーとコミュニティのパターンを取り入れるために新しいフレームワークを使い始めるときは重要です。 Reactの場合、クラスやメソッドなどはありません。代わりに、のコンポーネントがとのデータ（一部ではの状態）までしかありません。

フラックスの原則に従うと、データが単一の方法で流れるようにアプリケーションのアーキテクチャを構築するようにしてください。上から下へ

したがって、コンポーネントの代わりに、コンポーネントXの関数を呼び出すと、Xがそのコンポーネントの状態を変更してから新しい値をXに渡す関数を親コンポーネントから受け取るようにすることができます。

const A = ({onClick}) => (
    <button onClick={onClick}>Click me</button> 
); 

const B = ({value}) => (
    <span>{value}</span> 
); 

class Parent extends React.Component { 
    constructor() { 
    this.state = { 
     foo: 'foo' 
    }; 
    } 

    render() { 
    return (
     <div> 
     <A onClick={() => this.setState({foo: 'bar'})}/> 
     <B value={this.state.foo}/> 
     </div> 
    ); 
    } 
} 

ご覧のとおり、親コンポーネントは、状態の処理とさまざまな兄弟コンポーネントの接続を担当しています。

Reactの探索に移りながら、Reduxを使用してデータのロジックを抽出し、コンポーネントの外部に完全に記述することができます。結局のところ、プレゼンテーションコンポーネントとコンテナコンポーネントがあります。