傳遞子組件vs傳遞純js對象

將靜態項目列表傳遞到組件的首選方法是什麼？傳遞子組件vs傳遞純js對象

比方說，我有一個Options組件，它應該呈現爲具有多個OptionsItem的下拉列表。

是更好地創造Options組件使用這種方式

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

或這樣

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

，並有這樣的事情裏面render方法

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

我通過簡單的字符串數組爲簡單起見，但它可能是一個n對象或對象數組

我更喜歡第一種方法，我認爲它更易於閱讀並且更加靈活。另一個優點是，我不必在呈現項目時考慮唯一鍵（並且使用索引通常不是一個好主意），我所看到的唯一「缺點」是它需要多一點代碼。

來源

2016-08-03 Michał

我猜都是有效的。如果你有2000個選項，我認爲你應該採取第二個...但是否則第一個感覺更可讀。

第一個是更接近一些反應本地組件（即可以被認爲是一個陣營的標準呢？）：

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>

最好的辦法也許是：

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

來源

2016-08-03 21:28:48

你實際上可以支持一個基元數組或React元素。如果不是React元素，則使用React.Children.map將每個子元素轉換爲OptionsItem。如果需要，可以進一步限制propType爲OptionsItem或字符串（或數字或其他）。

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>

來源

2016-08-03 21:47:48 ryanjduffy

傳遞子組件vs傳遞純js對象

回答

相關問題