Reactの子どもが特定の小道具をいくつ持っているか確認するには？

Question

私は2種類のコンポーネントを持っています。それらをアウターとインナーと呼ぼう。このようなものを想像：

<Outer> 
    <h4>{this.prop.title} ({this.state.withX}/{this.state.total})</h4> 
    <Inner isX/> 
    <Inner isX/> 
    <Inner/> 
    <Inner/> 
</Outer> 

を私はこの機能を持っている：

getInitialState: function() { 
    return { 
     total: React.Children.count(this.props.children), 
     withX: /// ??? /// 
    }; 
} 

は、どのように私は、その値を得るのですか？私はこのようなものを手に入れようとしていた：

withX: function() { 
    var counter = React.Children.forEach(this.props.children, function(child) { 
     // if... 
     return //something 
    }); 
return counter; 
} 

しかし...私はそれがどこにもないと感じる。

Answer 1

子供を反復するときに、その小道具を調べることができます。たとえば、あなたは上記の持っているforEach方法を使用して、あなたはこのような何かを行うことができます：

withX: function() { 
    var counter = 0; 
    React.Children.forEach(this.props.children, function(child) { 
    if (child.props.isX) counter++; 
    }); 
    return counter; 
} 

を反応させるのも、あなたは素敵な配列のメソッドのJSを提供して使用して同じことを行うことができますtoArray helperを提供しています。

return React.Children.toArray(this.props.children).filter(function(child) { 
    return child.props.isX; 
}).length; 

あなたはES6を使用している場合は、矢印の機能をかなり簡潔にこれを行うことができます。

return React.Children.toArray(this.props.children).filter(c => c.props.isX).length; 

唯一の難点があり、その場合Outerがカウントを行っている場合は、Outerもh4をレンダリングする必要があります。ここでは完全な例です：

const App = React.createClass({ 
    render() { 
    return (
     <Outer title="Things"> 
     <Inner isX/> 
     <Inner isX/> 
     <Inner/> 
     <Inner/> 
     </Outer> 
    ); 
    } 
}); 

const Outer = React.createClass({ 
    getInitialState() { 
    return { 
     total: React.Children.count(this.props.children), 
     withX: this.countChildrenWithX(this.props.children) 
    }; 
    }, 

    countChildrenWithX(children) { 
    const { toArray } = React.Children; 
    return toArray(children).filter(c => c.props.isX).length; 
    }, 

    render() { 
    return (
     <div> 
     <h4>{this.props.title} ({this.state.withX}/{this.state.total})</h4> 
     <hr /> 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

const Inner = React.createClass({ 
    render() { 
    return <div>Inner - withX = {String(!!this.props.isX)}</div>; 
    } 
}); 

そしてhere's a working JS Binは発揮しますhttps://jsbin.com/xameyun/edit?js,output

Answer 2

は今React.Children.count(children)方法がここに文書化されたリアクトhttps://facebook.github.io/react/docs/react-api.html#react.children.count

UPDATE：反射時 、私は、これは実際に質問に答えるかわかりませんしかし、すでに人々がそれに投票しているので、とにかくここを離れることになるでしょう。