反應：如何在父級的渲染函數中檢查一個孩子的類型？

我知道，在渲染過程中，我可以通過引用來獲取孩子，例如，調用孩子上的函數（我可以爲此添加孩子）來確定孩子的類型。反應：如何在父級的渲染函數中檢查一個孩子的類型？

<Child ref={(child) => {this._childType = child.myFunctionToGetTheType();}} />

但在這個例子中，函數實際上不叫，直到孩子被安裝的，所以家長的render完成後執行。

我有一個通過道具接收其子女的父組件。由於React limitations我需要在父母的render完成執行之前以特殊方式對待特定的孩子（即從父母的render函數返回其他內容）。

是否可以在從父母的render函數返回之前確定孩子的類型（即不使用refs）？

來源

2016-12-16 Amiramix

我不能停滯不前不問「爲什麼你想要它？！」 :)看起來像壞設計 –

即使它設計不好，問題仍然可以問:)我已經說過爲什麼我需要這個。這是React限制的解決方法，希望在下一個版本中解決。我基本上需要替換這個https://github.com/yoonka/unigrid/blob/8e4c1f1cda4e261691f8ede921a0124fc76ff7bb/src/Unigrid.js#L197這是用來確定如何渲染一個孩子在這裏https://github.com/yoonka/ unigrid/blob/8e4c1f1cda4e261691f8ede921a0124fc76ff7bb/src/Unigrid.js＃L175具有更好的解決方案，因爲當前的一個不使用官方的React API。 – Amiramix

Duno爲什麼你認爲這不是一種React方式，但我認爲通過渲染中間的ref來獲取孩子更不是反應方式，然後獲得已創建（但未渲染）孩子的類型。 –

處理孩子的時候，我有同樣的問題，我在那裏依靠child.type.name確定組件的類型。雖然這對我來說很好，但問題是舊版瀏覽器不知道如何支持，所以我不得不尋找另一種方式。我用的是無狀態的功能成分，並沒有想轉行了，所以最終利用道具

const MySFC =() => { 
    //... 
    return (
    <div className="MySFC"></div> 
); 
}; 

MySFC.propTypes = { 
    type: PropTypes.string 
}; 

MySFC.defaultProps = { 
    type: "MySFC" 
} 

export default MySFC;

然後而是採用child.type.name === 'MySFC'我以前child.props.type === 'MySFC'

並不理想，但工作

來源

2017-09-29 21:47:41 Daniel

我已經添加了一個靜態函數的類擴展React.Element，似乎我能夠通過child.type.theStaticFunction訪問它。這可能仍然沒有正確使用React API，但至少它在代碼縮小之後起作用（child.type.name不起作用，因爲縮小器正在用較短的版本替換類名）。

export default class MyType extends React.Component { 
    static isMyType() { 
    return true; 
    } 
}

然後在render

static _isChildOfMyType(child) { 
    const isMyType = child.type && child.type.isMyType && elem.type.isMyType(); 
    return !!isMyType; 
}

來源

2016-12-19 12:25:37 Amiramix

反應：如何在父級的渲染函數中檢查一個孩子的類型？

回答

相關問題