Question

将静态项目列表传递给组件的首选方法是什么？

让我们举例来说，我有一个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>)

为简单起见，我传递了一个简单字符串数组，但它也可以是对象或对象数组

我更喜欢第一种方法，我认为它更容易阅读并且更灵活。另一个优点是我不必在渲染项目时考虑一个唯一的密钥（并且使用索引通常不是一个好主意），唯一的缺点是＆＃39;我看到它需要更多的代码。

Answer 1

我猜两者都有效。如果你有2000个选项，我认为你应该选择第二个......但是第一个选择感觉更可读。

第一个更接近一些反应本机组件（可以认为是React标准？）：

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>

Answer 2

您实际上可以支持基元数组或React元素。如果它不是React元素，则使用React.Children.map将每个子节点转换为OptionsItem。如果需要，您可以进一步将propType限制为OptionsItem或字符串（或数字或其他）。

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

传递子组件与传递普通js对象

2 个答案: