Wie überprüft man wie viele React Kinder eine bestimmte Requisite haben?

Question

Ich habe zwei Arten von Komponenten. Nennen wir sie äußerlich und innerlich. Stellen Sie sich vor etwas wie folgt aus:

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

Ich habe diese Funktion:

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

Wie bekomme ich diesen Wert? Ich habe versucht, etwas wie folgt zu bekommen:

Aber ... Ich fühle, dass es mich nirgends bekommen wird.

Answer 1

Wenn Sie über die Kinder iterieren, können Sie ihre Requisiten überprüfen. Zum Beispiel mit der forEach Methode, die Sie oben haben, könnten Sie so etwas tun:

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

Reagieren auch ein toArray helper bieten, die Sie tun das gleiche mit der netten Array Methoden JS läßt bestimmt:

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

wenn Sie ES6 verwenden, können dies mit einem Pfeil Funktion ganz kurz und bündig tun:

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

Der einzige Haken ist, dass, wenn Outer macht das Zählen, dann Outer muss auch die h4 rendern. Hier ist ein vollständiges Beispiel:

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>; 
    } 
}); 

Und here's a working JS Bin zu demonstrieren: https://jsbin.com/xameyun/edit?js,output

Answer 2

Reagieren jetzt hat React.Children.count(children) Methode hier dokumentiert https://facebook.github.io/react/docs/react-api.html#react.children.count

UPDATE: bei der Reflexion, ich bin nicht sicher, ob dies tatsächlich die Frage beantwortet , aber wird hier sowieso gehen, weil Leute bereits darüber abgestimmt haben.