Übergeben von untergeordneten Komponenten im Vergleich zum Übergeben einfacher js-Objekte

Question

Wie wird die statische Liste von Elementen vorzugsweise in eine Komponente übergeben?

Nehmen wir zum Beispiel an, dass ich eine Options Komponente habe, die als Dropdown mit mehreren OptionsItem rendern sollte.

Ist es besser Options Komponente zu erstellen verwendet werden, um diese Art und Weise

<Options> 
    <OptionsItem>Option 1</OptionsItem> 
    <OptionsItem>Option 2</OptionsItem> 
    ... 
</Options> 

oder auf diese Weise

<Options items=['Option 1', 'Option 2', ...] /> 

und haben so etwas wie dieses innerhalb render Methode

items.map((item, index) => <OptionsItem>item</OptionsItem>) 

gebe ich eine Reihe von einfachen Strings zur Vereinfachung, aber es könnte ein sein n Objekt oder Array von Objekten sowie

Ich mag den ersten Ansatz mehr, ich denke, es ist einfacher zu lesen und ist flexibler. Ein weiterer Vorteil ist, dass ich beim Rendern von Objekten nicht an einen eindeutigen Schlüssel denken muss (und die Verwendung von Index ist normalerweise keine gute Idee), der einzige "Nachteil", den ich sehe, ist, dass etwas mehr Code benötigt wird.

Answer 1

Ich denke beide sind gültig. Wenn du 2000 Optionen hast, denke ich, du solltest die zweite nehmen ... Aber sonst fühlt man sich zuerst besser lesbar.

Die erste ist näher an einige reagieren native Komponente (das könnte erwägen eine Standard-Reaktion sein?):

https://facebook.github.io/react-native/docs/picker.html

<Picker 
    selectedValue={this.state.language} 
    onValueChange={(lang) => this.setState({language: lang})}> 
    <Picker.Item label="Java" value="java" /> 
    <Picker.Item label="JavaScript" value="js" /> 
</Picker> 

Der beste Weg ist vielleicht:

<Options> 
    <Options.Item /> 
</Options> 

Answer 2

Sie können entweder ein Array von Primitiven oder React-Elementen unterstützen. Verwenden Sie React.Children.map, um jedes untergeordnete Element in ein OptionsItem zu konvertieren, wenn es kein React-Element ist. Sie könnten den propType weiter einschränken, um entweder ein OptionsItem oder eine Zeichenkette (oder eine Zahl oder was auch immer) zu sein, wenn Sie es brauchen.

const OptionItem = (props) => (
 
    <div> {props.children} </div> 
 
); 
 

 
const Options = (props) => { 
 
    const children = React.Children.map(props.children, (child) => { 
 
    if (React.isValidElement(child)) { 
 
     return child; 
 
    } else { 
 
     return <OptionItem>{child}</OptionItem > 
 
    } 
 
    }); 
 

 
    return (
 
    <div className="options"> 
 
     {children} 
 
    </div> 
 
); 
 
}; 
 

 
Options.propTypes = { 
 
    children: React.PropTypes.node 
 
} 
 

 
ReactDOM.render(
 
\t <Options> 
 
    {['First', 'Second', 'Third', 'Fourth']} 
 
    </Options > , 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>