如何在不使用React中的道具的情況下向組件層次傳遞函數？

假設我有組件層次結構A，B，C。有沒有一種方法可以在不使用道具的情況下從C調用A的函數？問題是：是否有可能從流程中排除中介B？如何在不使用React中的道具的情況下向組件層次傳遞函數？

2017-02-16 Alex Alonso

您可以使用Context來實現此目的。根據反應文檔它允許：

通過組件樹通數據，而不必在每一級手動向下傳遞道具。

2017-02-16 11:53:46

只需詳細說明：通過在A上實現'getChildContext（）'和定義'childContextTypes'，可以使用'contextTypes'在任何後代組件中使用該函數。在整個層次結構中維護這不是強制性的。 –

示例[here]（https://egghead.io/lessons/javascript-redux-passing-the-store-down-implicitly-via-context）和警告[此處]（https://facebook.github.io/ react/docs/context.html＃why-not-to-use-context） – juancab

在您發佈的同一鏈接中，建議不要使用上下文。 '如果你想讓你的應用程序穩定，不要使用上下文。這是一個實驗性的API，它很可能在未來的React版本中打破。' –

是的，這是可能的。傳遞的功能道具B，則通過同樣的道具的道具C.Then可以調用函數如下：

this.props.someFunction();

來源

2017-02-16 11:54:52

問題是如何做到這一點，而不必傳遞道具:) –

是的，我看到問題被編輯。 –

語境是一個解決方案，但可能是一個壞主意，特別是如果你」重新加入React。

嘗試使用ES6的...rest操作，喜歡解決問題如下：

const A = ({ arg1, arg2 = 4, ...rest }) => (
    <B size={arg1 * arg2} {...rest} /> 
); 


const B = ({size, size = {}, ...rest}) => (
    <C {...rest} style={style} /> 
);

這是一個原始例子，這個想法是，C得到的一切B被給予，而B不知道所有這些參數，只會提供它們。這裏B提供style但不知道style是給他的。但C知道他可以得到size，因此可以使用它。

如果你不知道上下文是如何工作的，這種方法要比使用上下文好得多。你應該首先嚐試這個休息事情而不是上下文。

上下文有時非常有用，但通常情況下，您必須知道自己在做什麼。

請注意，此解決方案需要ES6，因此您需要使用Babel或同等工具來轉儲代碼。

來源

2017-02-16 14:20:50 Vadorequest

如何在不使用React中的道具的情況下向組件層次傳遞函數？

回答

相關問題