2015-10-06 11 views
6

React v0.14は、TestUtils.findAllInRenderedTreeによってルートコンポーネント内のレンダリングされたすべてのコンポーネントをトラバースする機能を提供しなくなりました。DOMコンポーネントは除外されます。TestUtils.findAllInRenderedTreeを使用せずにDOMコンポーネントを含むすべてのReactコンポーネントをトラバースする方法

すべてのコンポーネントがルートコンポーネント内にありますか?

+0

私は何か刺激的なことを尋ねましたか?なぜ質問がマイナスになったのですか? –

+0

大きな質問です。 Reactで行うことは不可能です。なぜなら、この機能はいくつかの気まぐれなReactの作者によって意図的に拒否されたからです。 –

答えて

3

子を反復してノードを再帰的にトラバースすることができます。

function traverse(node, visitor){ 
    return _traverse(node, visitor, {level: 0, parent: null}); 
} 

function _traverse(node, visitor, state){ 
    visitor(node, state); 

    if (!node.props) return; 
    var children = React.Children.toArray(node.props.children); 

    children.forEach((child) => _traverse(child, visitor, { 
    level: state.level + 1, parent: node 
    })); 
} 

ここはan exampleです。

forEachの代わりにマップまたはフィルタになるように関数を変更することができます。


一般的なルールとして、このようなことはユニットテストやメタプログラミング以外のアンチパターンです。

+0

ありがとう!実際、はい、これはメタプログラミングのためのものです - React UI Builderのためです。 –

+1

既にレンダリングされたコンポーネントをトラバースする場合には機能しません - コンポーネントはレンダリングの完了後に小道具に子を持ちません。 –

+0

私はあなたが 'componentWillReceiveProps(nextProps){this.children = nextProps.children}'のようなcomponentWillReceivePropsでキャプチャする必要があると思います。 – FakeRainBrigand

関連する問題