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的情況下，不存在類和方法之類的東西。相反，只有組件和數據（和一些擴展狀態）。

正在關注flux原理，您應該嘗試以一種數據以單一方式流動的方式構建您的應用程序。從頂部到底部。

代替組分 Z調用部件 X函數

這樣，，可以有X接收功能從父組件修改組件的狀態，然後使一個新值X。如您所見，父組件現在負責處理狀態並將不同的兄弟組件連接在一起。

隨着您對React的深入探討，您可能會開始使用Redux來提取數據的完整邏輯，並完全將狀態置於組件之外。你最終會得到什麼是演示組件和容器組件。