Picker.Item未定义反应原生
2021-07-01
811
我在我的项目中实现了 https://github.com/react-native-picker/picker 作为我自己的组件。 为了让选择器中的项目数量动态变化,我决定使用 MyPicker.Item 执行类似以下操作:
import { MyPicker } from '../Common/MyPicker.component';
<MyPicker
style={styles.picker}
selectedValue={this.state.selectedItem}
onValueChange={(itemValue) =>
this.setState({selectedItem: itemValue})}>
<MyPicker.Item label='dziewczynka' value='dziewczynka' color='black' />
<MyPicker.Item label='chłopiec' value='chłopiec' color='black' />
</MyPicker>
这就是 MyPicker 的样子:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import styles from './MyPicker.component.style';
export function MyPicker(props) {
return (
<View style={styles.container}>
<Picker
onValueChange={(itemValue) =>
props.onValueChange(itemValue)}
mode={'dropdown'}>
{props.children}
</Picker>
</View>
)
}
它正在运行,我可以选择这些项目,它返回正确的值,但我收到了这个警告,这很烦人。我该如何处理?
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
1个回答
您的代码中没有
MyPicker.Item
的定义 - 看来您实际上只是想重用
Picker.Item
中定义的定义。一种可能的方法:
import {Picker} from '@react-native-picker/picker';
// ...
function MyPicker(props) {
return (
<View style={styles.container}>
<Picker
onValueChange={(itemValue) =>
props.onValueChange(itemValue)}
mode={'dropdown'}>
{props.children}
</Picker>
</View>
)
}
MyPicker.Item = Picker.Item;
export { MyPicker };
raina77ow
2021-07-01